@ebiz/designer-components 0.1.0 → 0.1.1

package/src/views/EbizRadioDemo.vue

@@ -1,152 +1,152 @@
-<template>
-  <div class="radio-demo">
-    <h2>Radio 单选框组件</h2>
-
-    <h3>基础单选框</h3>
-    <div class="demo-section">
-      <ebiz-radio label="未选中项" />
-      <ebiz-radio label="允许取消选中项" :allowUncheck="true" v-model="radio1" />
-      <ebiz-radio label="选中项" v-model="radio2" />
-      <ebiz-radio label="选中禁用态" disabled v-model="radioDisabled" />
-      <ebiz-radio label="未选中禁用态" disabled />
-    </div>
-
-    <h3>按钮单选框组</h3>
-    <div class="demo-section">
-      <h4>边框型单选按钮</h4>
-      <ebiz-radio-group v-model="group1" variant="outline">
-        <ebiz-radio value="1" label="选项一" />
-        <ebiz-radio value="2" label="选项二" />
-        <ebiz-radio value="3" label="选项三" />
-        <ebiz-radio value="4" label="选项四" />
-        <ebiz-radio value="5" label="选项五" />
-      </ebiz-radio-group>
-
-      <h4>填充型单选按钮</h4>
-      <ebiz-radio-group v-model="group2" variant="primary-filled">
-        <ebiz-radio value="1" label="选项一" />
-        <ebiz-radio value="2" label="选项二" />
-        <ebiz-radio value="3" label="选项三" />
-        <ebiz-radio value="4" label="选项四" />
-        <ebiz-radio value="5" label="选项五" />
-      </ebiz-radio-group>
-
-      <h4>带禁用状态的单选按钮</h4>
-      <ebiz-radio-group v-model="group3">
-        <ebiz-radio value="1" label="选项一" />
-        <ebiz-radio value="2" label="选项二" />
-        <ebiz-radio value="3" label="选项三" />
-        <ebiz-radio value="4" label="选中禁用态" disabled />
-        <ebiz-radio value="5" label="未选中禁用态" disabled />
-      </ebiz-radio-group>
-    </div>
-
-    <h3>不同尺寸的单选按钮</h3>
-    <div class="demo-section">
-      <h4>大尺寸</h4>
-      <ebiz-radio-group v-model="groupSize1" size="large">
-        <ebiz-radio value="1" label="选项一" />
-        <ebiz-radio value="2" label="选项二" />
-        <ebiz-radio value="3" label="选项三" />
-        <ebiz-radio value="4" label="选项四" />
-      </ebiz-radio-group>
-
-      <h4>中尺寸（默认）</h4>
-      <ebiz-radio-group v-model="groupSize2" size="medium">
-        <ebiz-radio value="1" label="选项一" />
-        <ebiz-radio value="2" label="选项二" />
-        <ebiz-radio value="3" label="选项三" />
-        <ebiz-radio value="4" label="选项四" />
-      </ebiz-radio-group>
-
-      <h4>小尺寸</h4>
-      <ebiz-radio-group v-model="groupSize3" size="small">
-        <ebiz-radio value="1" label="选项一" />
-        <ebiz-radio value="2" label="选项二" />
-        <ebiz-radio value="3" label="选项三" />
-        <ebiz-radio value="4" label="选项四" />
-      </ebiz-radio-group>
-    </div>
-
-    <h3>使用options配置的单选框组</h3>
-    <div class="demo-section">
-      <ebiz-radio-group 
-        :options="[
-          { label: '选项一', value: '1' },
-          { label: '选项二', value: '2' },
-          { label: '选项三', value: '3' },
-          { label: '禁用选项', value: '4', disabled: true }
-        ]"
-        v-model="optionsGroup"
-      />
-    </div>
-
-    <h3>可取消选中的单选框组</h3>
-    <div class="demo-section">
-      <ebiz-radio-group 
-        :allowUncheck="true"
-        :options="[
-          { label: '可取消选中项一', value: '1' },
-          { label: '可取消选中项二', value: '2' },
-          { label: '可取消选中项三', value: '3' }
-        ]"
-        v-model="uncheckGroup"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'EbizRadioDemo'
-}
-</script>
-
-<script setup>
-import { ref } from 'vue';
-import { EbizRadio, EbizRadioGroup } from '../index.js';
-
-// 单选框状态
-const radio1 = ref(true);
-const radio2 = ref(true);
-const radioDisabled = ref(true);
-
-// 单选组状态
-const group1 = ref('1');
-const group2 = ref('1');
-const group3 = ref('1');
-
-// 不同尺寸的单选组
-const groupSize1 = ref('1');
-const groupSize2 = ref('1');
-const groupSize3 = ref('1');
-
-// options配置的单选组
-const optionsGroup = ref('1');
-
-// 可取消选中的单选组
-const uncheckGroup = ref('1');
-</script>
-
-<style scoped>
-.radio-demo {
-  padding: 20px;
-}
-
-.demo-section {
-  margin-bottom: 30px;
-  border: 1px solid #eee;
-  padding: 16px;
-  border-radius: 6px;
-}
-
-h3 {
-  margin-top: 24px;
-  margin-bottom: 16px;
-}
-
-h4 {
-  margin-top: 16px;
-  margin-bottom: 8px;
-}
+<template>
+  <div class="radio-demo">
+    <h2>Radio 单选框组件</h2>
+
+    <h3>基础单选框</h3>
+    <div class="demo-section">
+      <ebiz-radio label="未选中项" />
+      <ebiz-radio label="允许取消选中项" :allowUncheck="true" v-model="radio1" />
+      <ebiz-radio label="选中项" v-model="radio2" />
+      <ebiz-radio label="选中禁用态" disabled v-model="radioDisabled" />
+      <ebiz-radio label="未选中禁用态" disabled />
+    </div>
+
+    <h3>按钮单选框组</h3>
+    <div class="demo-section">
+      <h4>边框型单选按钮</h4>
+      <ebiz-radio-group v-model="group1" variant="outline">
+        <ebiz-radio value="1" label="选项一" />
+        <ebiz-radio value="2" label="选项二" />
+        <ebiz-radio value="3" label="选项三" />
+        <ebiz-radio value="4" label="选项四" />
+        <ebiz-radio value="5" label="选项五" />
+      </ebiz-radio-group>
+
+      <h4>填充型单选按钮</h4>
+      <ebiz-radio-group v-model="group2" variant="primary-filled">
+        <ebiz-radio value="1" label="选项一" />
+        <ebiz-radio value="2" label="选项二" />
+        <ebiz-radio value="3" label="选项三" />
+        <ebiz-radio value="4" label="选项四" />
+        <ebiz-radio value="5" label="选项五" />
+      </ebiz-radio-group>
+
+      <h4>带禁用状态的单选按钮</h4>
+      <ebiz-radio-group v-model="group3">
+        <ebiz-radio value="1" label="选项一" />
+        <ebiz-radio value="2" label="选项二" />
+        <ebiz-radio value="3" label="选项三" />
+        <ebiz-radio value="4" label="选中禁用态" disabled />
+        <ebiz-radio value="5" label="未选中禁用态" disabled />
+      </ebiz-radio-group>
+    </div>
+
+    <h3>不同尺寸的单选按钮</h3>
+    <div class="demo-section">
+      <h4>大尺寸</h4>
+      <ebiz-radio-group v-model="groupSize1" size="large">
+        <ebiz-radio value="1" label="选项一" />
+        <ebiz-radio value="2" label="选项二" />
+        <ebiz-radio value="3" label="选项三" />
+        <ebiz-radio value="4" label="选项四" />
+      </ebiz-radio-group>
+
+      <h4>中尺寸（默认）</h4>
+      <ebiz-radio-group v-model="groupSize2" size="medium">
+        <ebiz-radio value="1" label="选项一" />
+        <ebiz-radio value="2" label="选项二" />
+        <ebiz-radio value="3" label="选项三" />
+        <ebiz-radio value="4" label="选项四" />
+      </ebiz-radio-group>
+
+      <h4>小尺寸</h4>
+      <ebiz-radio-group v-model="groupSize3" size="small">
+        <ebiz-radio value="1" label="选项一" />
+        <ebiz-radio value="2" label="选项二" />
+        <ebiz-radio value="3" label="选项三" />
+        <ebiz-radio value="4" label="选项四" />
+      </ebiz-radio-group>
+    </div>
+
+    <h3>使用options配置的单选框组</h3>
+    <div class="demo-section">
+      <ebiz-radio-group 
+        :options="[
+          { label: '选项一', value: '1' },
+          { label: '选项二', value: '2' },
+          { label: '选项三', value: '3' },
+          { label: '禁用选项', value: '4', disabled: true }
+        ]"
+        v-model="optionsGroup"
+      />
+    </div>
+
+    <h3>可取消选中的单选框组</h3>
+    <div class="demo-section">
+      <ebiz-radio-group 
+        :allowUncheck="true"
+        :options="[
+          { label: '可取消选中项一', value: '1' },
+          { label: '可取消选中项二', value: '2' },
+          { label: '可取消选中项三', value: '3' }
+        ]"
+        v-model="uncheckGroup"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EbizRadioDemo'
+}
+</script>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizRadio, EbizRadioGroup } from '../index.js';
+
+// 单选框状态
+const radio1 = ref(true);
+const radio2 = ref(true);
+const radioDisabled = ref(true);
+
+// 单选组状态
+const group1 = ref('1');
+const group2 = ref('1');
+const group3 = ref('1');
+
+// 不同尺寸的单选组
+const groupSize1 = ref('1');
+const groupSize2 = ref('1');
+const groupSize3 = ref('1');
+
+// options配置的单选组
+const optionsGroup = ref('1');
+
+// 可取消选中的单选组
+const uncheckGroup = ref('1');
+</script>
+
+<style scoped>
+.radio-demo {
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 30px;
+  border: 1px solid #eee;
+  padding: 16px;
+  border-radius: 6px;
+}
+
+h3 {
+  margin-top: 24px;
+  margin-bottom: 16px;
+}
+
+h4 {
+  margin-top: 16px;
+  margin-bottom: 8px;
+}
 </style> 

package/src/views/EbizSDataDemo.vue

@@ -1,137 +1,137 @@
-<template>
-  <div class="demo-container">
-    <h2>EbizSData 数据组件示例</h2>
-
-    <div class="demo-section">
-      <h3>基础用法</h3>
-      <div class="demo-block" style="background-color: #efefef;">
-        <EbizSData :apiConfig="{apiId:1933,apiType:'0'}" showDivider :defaultParams="{ status: 'active' }"
-          v-model:formData="formData1">
-          <template #form>
-            <ebiz-s-form-item v-model="formData1.keyword" label="搜索" type="input"></ebiz-s-form-item>
-            <ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
-            <ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
-            <ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
-            <ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
-            <ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
-            <ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
-            <ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
-            <ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
-          </template>
-          <template #left>
-            <EbizTdesignButtonDialog theme="primary" buttonText="新增" buttonIcon="add">
-              <template #body>
-                新增数据
-              </template>
-            </EbizTdesignButtonDialog>
-          </template>
-          <template #default="{ data }">
-            <tiny-grid :data="data" :columns="columns" bordered stripe />
-          </template>
-        </EbizSData>
-      </div>
-    </div>
-
-  </div>
-</template>
-
-<script>
-export default {
-  name: "EbizSDataDemo"
-};
-</script>
-
-<script setup>
-import { ref } from 'vue';
-import { EbizSData, EbizSFormItem } from '../index';
-import EbizTdesignButtonDialog from '../components/EbizTdesignButtonDialog.vue';
-
-// 表单数据
-const formData1 = ref({
-  keyword: '',
-  status: 'all'
-});
-
-// 表格列配置
-const columns = [
-  {
-    colKey: 'name',
-    title: '名称',
-    width: '200'
-  },
-  {
-    colKey: 'status',
-    title: '状态'
-  },
-  {
-    colKey: 'createTime',
-    title: '创建时间'
-  },
-  {
-    colKey: 'operation',
-    title: '操作'
-  }
-];
-</script>
-
-<style scoped>
-.demo-container {
-  padding: 24px;
-}
-
-.demo-section {
-  margin-bottom: 48px;
-}
-
-.demo-block {
-  margin-bottom: 24px;
-  padding: 24px;
-  border: 1px solid #e5e6eb;
-  border-radius: 6px;
-}
-
-.demo-code {
-  background-color: #f5f5f5;
-  padding: 16px;
-  border-radius: 6px;
-  font-size: 14px;
-  line-height: 1.5;
-  overflow-x: auto;
-}
-
-.demo-code pre {
-  margin: 0;
-}
-
-.custom-form {
-  margin-bottom: 16px;
-  padding: 16px;
-  background-color: #f9f9f9;
-  border-radius: 4px;
-}
-
-.data-cards {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-}
-
-.data-card {
-  flex: 1 1 300px;
-  padding: 16px;
-  background-color: #f9f9f9;
-  border-radius: 4px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-.data-card h4 {
-  margin-top: 0;
-  margin-bottom: 8px;
-  color: #0052d9;
-}
-
-.data-card p {
-  margin: 0;
-  color: #666;
-}
+<template>
+  <div class="demo-container">
+    <h2>EbizSData 数据组件示例</h2>
+
+    <div class="demo-section">
+      <h3>基础用法</h3>
+      <div class="demo-block" style="background-color: #efefef;">
+        <EbizSData :apiConfig="{apiId:1933,apiType:'0'}" showDivider :defaultParams="{ status: 'active' }"
+          v-model:formData="formData1">
+          <template #form>
+            <ebiz-s-form-item v-model="formData1.keyword" label="搜索" type="input"></ebiz-s-form-item>
+            <ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
+            <ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
+            <ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
+            <ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
+            <ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
+            <ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
+            <ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
+            <ebiz-s-form-item label="搜索2" type="input"></ebiz-s-form-item>
+          </template>
+          <template #left>
+            <EbizTdesignButtonDialog theme="primary" buttonText="新增" buttonIcon="add">
+              <template #body>
+                新增数据
+              </template>
+            </EbizTdesignButtonDialog>
+          </template>
+          <template #default="{ data }">
+            <tiny-grid :data="data" :columns="columns" bordered stripe />
+          </template>
+        </EbizSData>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "EbizSDataDemo"
+};
+</script>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizSData, EbizSFormItem } from '../index';
+import EbizTdesignButtonDialog from '../components/EbizTdesignButtonDialog.vue';
+
+// 表单数据
+const formData1 = ref({
+  keyword: '',
+  status: 'all'
+});
+
+// 表格列配置
+const columns = [
+  {
+    colKey: 'name',
+    title: '名称',
+    width: '200'
+  },
+  {
+    colKey: 'status',
+    title: '状态'
+  },
+  {
+    colKey: 'createTime',
+    title: '创建时间'
+  },
+  {
+    colKey: 'operation',
+    title: '操作'
+  }
+];
+</script>
+
+<style scoped>
+.demo-container {
+  padding: 24px;
+}
+
+.demo-section {
+  margin-bottom: 48px;
+}
+
+.demo-block {
+  margin-bottom: 24px;
+  padding: 24px;
+  border: 1px solid #e5e6eb;
+  border-radius: 6px;
+}
+
+.demo-code {
+  background-color: #f5f5f5;
+  padding: 16px;
+  border-radius: 6px;
+  font-size: 14px;
+  line-height: 1.5;
+  overflow-x: auto;
+}
+
+.demo-code pre {
+  margin: 0;
+}
+
+.custom-form {
+  margin-bottom: 16px;
+  padding: 16px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+}
+
+.data-cards {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.data-card {
+  flex: 1 1 300px;
+  padding: 16px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.data-card h4 {
+  margin-top: 0;
+  margin-bottom: 8px;
+  color: #0052d9;
+}
+
+.data-card p {
+  margin: 0;
+  color: #666;
+}
 </style>