@a2simcode/ui 0.0.46 → 0.0.48

package/docs/examples/number/advanced.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="advanced-demo">
+    <div class="demo-section">
+      <h3>精度设置 (precision)</h3>
+      <div class="demo-row">
+        <div class="demo-item">
+          <p>保留2位小数 (precision=2)：</p>
+          <j-number v-model="value1" :min="0" :max="10" :step="0.1" :precision="2" />
+          <p>当前值: {{ value1 }}</p>
+        </div>
+        <div class="demo-item">
+          <p>保留3位小数 (precision=3)：</p>
+          <j-number v-model="value2" :min="0" :max="5" :step="0.01" :precision="3" />
+          <p>当前值: {{ value2 }}</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>控制按钮设置</h3>
+      <div class="demo-row">
+        <div class="demo-item">
+          <p>隐藏控制按钮 (controls=false)：</p>
+          <j-number v-model="value3" :min="1" :max="10" :controls="false" />
+        </div>
+        <div class="demo-item">
+          <p>显示控制按钮 (controls=true)：</p>
+          <j-number v-model="value4" :min="1" :max="10" :controls="true" />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>文本对齐方式 (align)</h3>
+      <div class="demo-row">
+        <div class="demo-item">
+          <p>左对齐 (align=left)：</p>
+          <j-number v-model="value5" :align="'left'" />
+        </div>
+        <div class="demo-item">
+          <p>居中对齐 (align=center)：</p>
+          <j-number v-model="value6" :align="'center'" />
+        </div>
+        <div class="demo-item">
+          <p>右对齐 (align=right)：</p>
+          <j-number v-model="value7" :align="'right'" />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>禁用科学计数法</h3>
+      <div class="demo-row">
+        <div class="demo-item">
+          <p>允许科学计数法 (默认)：</p>
+          <j-number v-model="value8" />
+          <p>提示: 可以输入如 1e2 这样的科学计数法</p>
+        </div>
+        <div class="demo-item">
+          <p>禁用科学计数法 (disabledScientific=true)：</p>
+          <j-number v-model="value9" :disabled-scientific="true" />
+          <p>提示: 输入 'e' 或 'E' 将被阻止</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>其他属性</h3>
+      <div class="demo-row">
+        <div class="demo-item">
+          <p>占位符和标签：</p>
+          <j-number
+            v-model="value10"
+            :min="0"
+            :max="100"
+            placeholder="请输入数值"
+            label="数量输入框"
+            :value-on-clear="null"
+          />
+        </div>
+        <div class="demo-item">
+          <p>ARIA 标签和输入模式：</p>
+          <j-number v-model="value11" :inputmode="'decimal'" aria-label="价格输入框" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref(1.5)
+const value2 = ref(1.234)
+const value3 = ref(5)
+const value4 = ref(5)
+const value5 = ref(10)
+const value6 = ref(20)
+const value7 = ref(30)
+const value8 = ref(100)
+const value9 = ref(100)
+const value10 = ref(25)
+const value11 = ref(15.5)
+</script>
+
+<style scoped>
+.advanced-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+}
+
+.demo-section {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.demo-section h3 {
+  margin: 0;
+  font-size: 16px;
+  color: #303133;
+}
+
+.demo-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.demo-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 250px;
+}
+
+.demo-item p {
+  margin: 0 0 8px 0;
+  font-size: 14px;
+  color: #606266;
+}
+</style>

package/docs/examples/number/basic.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="basic-demo">
+    <div class="demo-item">
+      <p>基础用法：</p>
+      <j-number v-model="value1" :min="1" :max="10" />
+      <p>当前值: {{ value1 }}</p>
+    </div>
+
+    <div class="demo-item">
+      <p>在表单中的使用：</p>
+      <el-form :model="form" label-width="auto">
+        <el-form-item label="数量：">
+          <j-number v-model="form.quantity" :min="0" :max="100" />
+        </el-form-item>
+        <el-form-item label="价格：">
+          <j-number v-model="form.price" :min="0" :precision="2" :step="0.1" />
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="submitForm">提交</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const value1 = ref(1)
+
+const form = ref({
+  quantity: 5,
+  price: 10.5,
+})
+
+const submitForm = () => {
+  ElMessage.success(`提交成功！数量: ${form.value.quantity}, 价格: ${form.value.price}`)
+}
+</script>
+
+<style scoped>
+.basic-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.demo-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 15px;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+}
+
+.demo-item p {
+  margin: 0 0 10px 0;
+  font-size: 14px;
+  color: #606266;
+}
+</style>

package/docs/examples/number/disabled.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="disabled-demo">
+    <div class="demo-item">
+      <p>正常状态：</p>
+      <j-number v-model="value1" :min="1" :max="100" />
+    </div>
+    <div class="demo-item">
+      <p>禁用状态 (disabled)：</p>
+      <j-number v-model="value2" :min="1" :max="100" disabled />
+    </div>
+    <div class="demo-item">
+      <p>只读状态 (readonly)：</p>
+      <j-number v-model="value3" :min="1" :max="100" readonly />
+    </div>
+    <div class="demo-item">
+      <p>禁用且只读：</p>
+      <j-number v-model="value4" :min="1" :max="100" disabled readonly />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref(50)
+const value2 = ref(50)
+const value3 = ref(50)
+const value4 = ref(50)
+</script>
+
+<style scoped>
+.disabled-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.demo-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.demo-item p {
+  margin: 0 0 8px 0;
+  font-size: 14px;
+  color: #606266;
+}
+</style>

package/docs/examples/number/size.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="size-demo">
+    <div class="demo-item">
+      <p>Large Size:</p>
+      <j-number v-model="value" size="large" :min="1" :max="100" />
+    </div>
+    <div class="demo-item">
+      <p>Default Size:</p>
+      <j-number v-model="value" size="default" :min="1" :max="100" />
+    </div>
+    <div class="demo-item">
+      <p>Small Size:</p>
+      <j-number v-model="value" size="small" :min="1" :max="100" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref(50)
+</script>
+
+<style scoped>
+.size-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.demo-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.demo-item p {
+  margin: 0 0 8px 0;
+  font-size: 14px;
+  color: #606266;
+}
+</style>

package/docs/examples/number/slots.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="slots-demo">
+    <div class="demo-section">
+      <h3>前缀和后缀</h3>
+      <div class="demo-row">
+        <div class="demo-item">
+          <p>使用属性设置前缀后缀</p>
+          <j-number v-model="value1" prefix="前缀" suffix="后缀"> </j-number>
+        </div>
+        <div class="demo-item">
+          <p>使用插槽设置前缀后缀</p>
+          <j-number v-model="value2">
+            <template #prefix>
+              <span>前缀</span>
+            </template>
+            <template #suffix>
+              <span>后缀</span>
+            </template>
+          </j-number>
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>自定义按钮图标</h3>
+      <div class="demo-row">
+        <div class="demo-item">
+          <p>自定义增加、减少按钮图标</p>
+          <j-number v-model="value3" :decrease-icon="decreaseIcon" :increase-icon="increaseIcon">
+          </j-number>
+        </div>
+        <div class="demo-item">
+          <p>自定义按钮图标 (字符串)</p>
+          <j-number v-model="value4" :decrease-icon="decreaseIcon" :increase-icon="increaseIcon">
+          </j-number>
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>控制按钮位置</h3>
+      <div class="demo-row">
+        <div class="demo-item">
+          <p>按钮在右侧 (默认)</p>
+          <j-number v-model="value5" :min="1" :max="100" controls-position="right" />
+        </div>
+        <div class="demo-item">
+          <p>显示控制按钮</p>
+          <j-number v-model="value6" :min="1" :max="100" :controls="true" />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>其他高级属性</h3>
+      <div class="demo-row">
+        <div class="demo-item">
+          <p>数值对齐方式 (居中)</p>
+          <j-number v-model="value7" :align="'center'" />
+        </div>
+        <div class="demo-item">
+          <p>禁用科学计数法</p>
+          <j-number v-model="value8" :disabled-scientific="true" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref(10)
+const value2 = ref(50)
+const value3 = ref(100)
+const value4 = ref(25)
+const value5 = ref(50)
+const value6 = ref(30)
+const value7 = ref(15)
+const value8 = ref(100)
+
+const decreaseIcon = 'mdi:arrow-down'
+const increaseIcon = 'mdi:arrow-up'
+</script>
+
+<style scoped>
+.slots-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+}
+
+.demo-section {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.demo-section h3 {
+  margin: 0;
+  font-size: 16px;
+  color: #303133;
+}
+
+.demo-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.demo-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 250px;
+}
+
+.demo-item p {
+  margin: 0 0 8px 0;
+  font-size: 14px;
+  color: #606266;
+}
+</style>

package/docs/examples/number/step-strictly.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="step-strictly-demo">
+    <div class="demo-item">
+      <p>普通步长模式 (非严格)：</p>
+      <j-number v-model="value1" :min="0" :max="10" :step="2" />
+      <p>当前值: {{ value1 }} (允许输入非步长倍数)</p>
+    </div>
+    <div class="demo-item">
+      <p>严格步长模式 (step-strictly=true)：</p>
+      <j-number v-model="value2" :min="0" :max="10" :step="2" step-strictly />
+      <p>当前值: {{ value2 }} (只接受步长倍数)</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref(0)
+const value2 = ref(0)
+</script>
+
+<style scoped>
+.step-strictly-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.demo-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.demo-item p {
+  margin: 0 0 8px 0;
+  font-size: 14px;
+  color: #606266;
+}
+</style>

package/docs/examples/number/step.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="step-demo">
+    <div class="demo-item">
+      <p>整数步长 (step=2)：</p>
+      <j-number v-model="value1" :min="0" :max="10" :step="2" />
+      <p>当前值: {{ value1 }}</p>
+    </div>
+    <div class="demo-item">
+      <p>小数步长 (step=0.1)：</p>
+      <j-number v-model="value2" :min="0" :max="10" :step="0.1" :precision="1" />
+      <p>当前值: {{ value2 }}</p>
+    </div>
+    <div class="demo-item">
+      <p>较大步长 (step=5)：</p>
+      <j-number v-model="value3" :min="0" :max="50" :step="5" />
+      <p>当前值: {{ value3 }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref(0)
+const value2 = ref(0)
+const value3 = ref(0)
+</script>
+
+<style scoped>
+.step-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.demo-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.demo-item p {
+  margin: 0 0 8px 0;
+  font-size: 14px;
+  color: #606266;
+}
+</style>

package/docs/examples/page/basic.vue

@@ -0,0 +1,41 @@
+<template>
+  <j-page :schema="schema" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const schema = ref([
+  {
+    type: 'j-layout',
+    config: {
+      left: 200,
+      top: 60,
+    },
+    children: [
+      {
+        type: 'j-button',
+        slot: 'left',
+        config: {
+          type: 'primary',
+          label: '左侧按钮',
+        },
+      },
+      {
+        type: 'j-button',
+        slot: 'top',
+        config: {
+          label: '顶部按钮',
+        },
+      },
+      {
+        type: 'j-button',
+        config: {
+          type: 'dashed',
+          label: '主体按钮',
+        },
+      },
+    ],
+  },
+])
+</script>

package/docs/examples/page/init.vue

@@ -0,0 +1,87 @@
+<template>
+    <div>
+        <j-button 
+            type="primary" 
+            label="使用 init 方法初始化" 
+            style="margin-bottom: 16px; margin-right: 8px" 
+            @click="handleInit" />
+        <j-button 
+            label="刷新表格数据" 
+            @click="handleRefresh" />
+        <j-button 
+            label="获取选中行" 
+            @click="handleGetSelection" />
+        <div style="position: relative; width: 100%; height: 400px; margin-top: 16px">
+            <j-page ref="pageRef" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const pageRef = ref()
+
+const columns = [
+    {
+        id: 'j_Name',
+        type: '',
+        config: {
+            label: '名称',
+            width: 120,
+            filter: {
+                isSearchKeyword: true,
+            },
+        },
+    },
+    {
+        id: 'enabledMark',
+        type: 'j-switch',
+        config: {
+            label: '有效',
+            activeValue: 1,
+            inactiveValue: 0,
+            change: async ({ row }) => {
+                console.log(row, 'change')
+            },
+        },
+    },
+]
+
+const schema = [
+    {
+        id: 'mainTable',
+        type: 'j-table-panel',
+        config: {
+            columns: columns,
+            rowKey: 'j_Id',
+            isMultiple: true,
+            sort: 'J_CreateDate DESC',
+            loadData: async () => {
+                // 生成随机数据
+                const names = ['项目A', '项目B', '项目C', '项目D', '项目E']
+                const count = Math.floor(Math.random() * 5) + 2 // 2-6条数据
+                const res = Array.from({ length: count }, (_, i) => ({
+                    j_Id: String(Date.now() + i),
+                    j_Name: names[Math.floor(Math.random() * names.length)] + '-' + Math.random().toString(36).slice(2, 6),
+                    enabledMark: Math.random() > 0.5 ? 1 : 0,
+                }))
+                return res
+            },
+        },
+    },
+]
+
+const handleInit = () => {
+    pageRef.value?.init(schema)
+}
+
+const handleGetSelection = () => {
+    const selected = pageRef.value?.call('mainTable', 'getSelection')
+    console.log(selected, 'selected')
+}
+// 通过 j-page.call 调用内部组件方法
+const handleRefresh = () => {
+    pageRef.value?.call('mainTable', 'refreshData', null)
+}
+</script>

package/docs/examples/radio/basic.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <j-radio v-model="value" :options="options" />
+    <p v-if="value" style="margin-top: 12px; color: #606266">选中的值: {{ value }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+const options = [
+  { label: '选项1', value: '1' },
+  { label: '选项2', value: '2' },
+  { label: '选项3', value: '3' },
+]
+</script>

package/docs/examples/radio/button.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <j-radio v-model="value" :options="options" :is-button="true" />
+    <p v-if="value" style="margin-top: 12px; color: #606266">选中的值: {{ value }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+const options = [
+  { label: '选项1', value: '1' },
+  { label: '选项2', value: '2' },
+  { label: '选项3', value: '3' },
+]
+</script>

package/docs/examples/radio/color.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <j-radio v-model="value" :options="options" :is-color="true" :colors="colors" />
+    <p v-if="value" style="margin-top: 12px; color: #606266">选中的值: {{ value }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+const options = [
+  { label: '红色', value: 'red' },
+  { label: '绿色', value: 'green' },
+  { label: '蓝色', value: 'blue' },
+]
+const colors = ['#f53f3f', '#00b42a', '#165dff']
+</script>