@a2simcode/ui 0.0.55 → 0.0.56

package/docs/examples/page/init.vue

@@ -1,87 +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>
+<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/panel/tool-buttons.vue

@@ -1,18 +1,18 @@
-<template>
-  <j-panel title="Panel with Tool Buttons"
-    :toolBtns="[
-      { id: 'edit',label: '编辑', config: { icon: 'mdi:settings-outline' }, click: handleEdit },
-    ]"
-  >
-    <div>This panel has some tool buttons in the header.</div>
-  </j-panel>
-</template>
-
-<script setup lang="ts">
-import JPanel from '../../../packages/components/panel'
-import { ElMessage } from 'element-plus'
-
-const handleEdit = () => {
-  ElMessage.success('Edit button clicked!')
-}
-</script>
+<template>
+  <j-panel title="Panel with Tool Buttons"
+    :toolBtns="[
+      { id: 'edit',label: '编辑', config: { icon: 'mdi:settings-outline' }, click: handleEdit },
+    ]"
+  >
+    <div>This panel has some tool buttons in the header.</div>
+  </j-panel>
+</template>
+
+<script setup lang="ts">
+import JPanel from '../../../packages/components/panel'
+import { ElMessage } from 'element-plus'
+
+const handleEdit = () => {
+  ElMessage.success('Edit button clicked!')
+}
+</script>

package/docs/examples/radio/basic.vue

@@ -1,17 +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>
+<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

@@ -1,17 +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>
+<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

@@ -1,18 +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>
+<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>

package/docs/examples/radio/disabled.vue

@@ -1,17 +1,17 @@
-<template>
-  <div>
-    <j-radio v-model="value" :options="options" :readonly="true" />
-    <p style="margin-top: 12px; color: #909399">单选框已禁用</p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value = ref('1')
-const options = [
-  { label: '选项1', value: '1' },
-  { label: '选项2', value: '2' },
-  { label: '选项3', value: '3' },
-]
-</script>
+<template>
+  <div>
+    <j-radio v-model="value" :options="options" :readonly="true" />
+    <p style="margin-top: 12px; color: #909399">单选框已禁用</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('1')
+const options = [
+  { label: '选项1', value: '1' },
+  { label: '选项2', value: '2' },
+  { label: '选项3', value: '3' },
+]
+</script>

package/docs/examples/radio/size.vue

@@ -1,29 +1,29 @@
-<template>
-  <div style="display: flex; flex-direction: column; gap: 20px">
-    <div>
-      <p style="margin-bottom: 8px; color: #606266">Large</p>
-      <j-radio v-model="value1" :options="options" size="large" />
-    </div>
-    <div>
-      <p style="margin-bottom: 8px; color: #606266">Default</p>
-      <j-radio v-model="value2" :options="options" size="default" />
-    </div>
-    <div>
-      <p style="margin-bottom: 8px; color: #606266">Small</p>
-      <j-radio v-model="value3" :options="options" size="small" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value1 = ref('')
-const value2 = ref('')
-const value3 = ref('')
-const options = [
-  { label: '选项1', value: '1' },
-  { label: '选项2', value: '2' },
-  { label: '选项3', value: '3' },
-]
-</script>
+<template>
+  <div style="display: flex; flex-direction: column; gap: 20px">
+    <div>
+      <p style="margin-bottom: 8px; color: #606266">Large</p>
+      <j-radio v-model="value1" :options="options" size="large" />
+    </div>
+    <div>
+      <p style="margin-bottom: 8px; color: #606266">Default</p>
+      <j-radio v-model="value2" :options="options" size="default" />
+    </div>
+    <div>
+      <p style="margin-bottom: 8px; color: #606266">Small</p>
+      <j-radio v-model="value3" :options="options" size="small" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref('')
+const value2 = ref('')
+const value3 = ref('')
+const options = [
+  { label: '选项1', value: '1' },
+  { label: '选项2', value: '2' },
+  { label: '选项3', value: '3' },
+]
+</script>

package/docs/examples/rate/basic.vue

@@ -1,24 +1,24 @@
-<template>
-  <div class="rate-demo">
-    <j-rate v-model="value" />
-    <div class="demo-result">Value: {{ value }}</div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value = ref(3)
-</script>
-
-<style scoped>
-.rate-demo {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-.demo-result {
-  font-size: 14px;
-  color: #666;
-}
-</style>
+<template>
+  <div class="rate-demo">
+    <j-rate v-model="value" />
+    <div class="demo-result">Value: {{ value }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref(3)
+</script>
+
+<style scoped>
+.rate-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.demo-result {
+  font-size: 14px;
+  color: #666;
+}
+</style>

package/docs/examples/rate/half.vue

@@ -1,24 +1,24 @@
-<template>
-  <div class="rate-demo">
-    <j-rate v-model="value" allow-half />
-    <div class="demo-result">Value: {{ value }}</div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value = ref(2.5)
-</script>
-
-<style scoped>
-.rate-demo {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-.demo-result {
-  font-size: 14px;
-  color: #666;
-}
-</style>
+<template>
+  <div class="rate-demo">
+    <j-rate v-model="value" allow-half />
+    <div class="demo-result">Value: {{ value }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref(2.5)
+</script>
+
+<style scoped>
+.rate-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.demo-result {
+  font-size: 14px;
+  color: #666;
+}
+</style>

package/docs/examples/rate/readonly.vue

@@ -1,11 +1,11 @@
-<template>
-  <div class="rate-demo">
-    <j-rate v-model="value" readonly />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value = ref(3.5)
-</script>
+<template>
+  <div class="rate-demo">
+    <j-rate v-model="value" readonly />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref(3.5)
+</script>

package/docs/examples/rate/text.vue

@@ -1,32 +1,32 @@
-<template>
-  <div class="rate-demo">
-    <div class="demo-item">
-      <p>Show Text</p>
-      <j-rate v-model="value1" show-text />
-    </div>
-    <div class="demo-item">
-      <p>Show Score</p>
-      <j-rate v-model="value2" show-score />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value1 = ref(3)
-const value2 = ref(4.5)
-</script>
-
-<style scoped>
-.rate-demo {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-.demo-item p {
-  margin-bottom: 8px;
-  font-size: 14px;
-  color: #666;
-}
-</style>
+<template>
+  <div class="rate-demo">
+    <div class="demo-item">
+      <p>Show Text</p>
+      <j-rate v-model="value1" show-text />
+    </div>
+    <div class="demo-item">
+      <p>Show Score</p>
+      <j-rate v-model="value2" show-score />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref(3)
+const value2 = ref(4.5)
+</script>
+
+<style scoped>
+.rate-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+.demo-item p {
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: #666;
+}
+</style>

package/docs/examples/select/basic.vue

@@ -1,16 +1,16 @@
-<template>
-  <j-select v-model="value" :options="options" placeholder="请选择" style="width: 300px" />
-  <p v-if="value" style="margin-top: 12px; color: #606266">选中的值: {{ value }}</p>
-</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' },
-  { label: '选项4', value: '4' },
-]
-</script>
+<template>
+  <j-select v-model="value" :options="options" placeholder="请选择" style="width: 300px" />
+  <p v-if="value" style="margin-top: 12px; color: #606266">选中的值: {{ value }}</p>
+</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' },
+  { label: '选项4', value: '4' },
+]
+</script>