@a2simcode/ui 0.0.263 → 0.0.264

package/docs/examples/comp/collapse.vue

@@ -1,38 +1,38 @@
-<template>
-  <j-comp
-    type="j-collapse"
-    :children="[
-      {
-        type: 'el-collapse-item',
-        config: {
-          label: 'Panel 1',
-        },
-        children: [
-          {
-            type: 'j-button',
-            config: {
-              label: 'Button in Panel 1',
-            },
-          },
-        ],
-      },
-      {
-        type: 'el-collapse-item',
-        config: {
-          label: 'Panel 2',
-          active: true,
-        },
-        children: [
-          {
-            type: 'j-button',
-            config: {
-              label: 'Button in Panel 2 (Active by default)',
-            },
-          },
-        ],
-      },
-    ]"
-  />
-</template>
-
-<script setup lang="ts"></script>
+<template>
+  <j-comp
+    type="j-collapse"
+    :children="[
+      {
+        type: 'el-collapse-item',
+        config: {
+          label: 'Panel 1',
+        },
+        children: [
+          {
+            type: 'j-button',
+            config: {
+              label: 'Button in Panel 1',
+            },
+          },
+        ],
+      },
+      {
+        type: 'el-collapse-item',
+        config: {
+          label: 'Panel 2',
+          active: true,
+        },
+        children: [
+          {
+            type: 'j-button',
+            config: {
+              label: 'Button in Panel 2 (Active by default)',
+            },
+          },
+        ],
+      },
+    ]"
+  />
+</template>
+
+<script setup lang="ts"></script>

package/docs/examples/comp/tabs.vue

@@ -1,38 +1,38 @@
-<template>
-  <j-comp
-    type="j-tabs"
-    :children="[
-      {
-        type: 'el-tab-pane',
-        config: {
-          label: 'Tab 1',
-        },
-        children: [
-          {
-            type: 'j-button',
-            config: {
-              label: 'Button in Tab 1',
-            },
-          },
-        ],
-      },
-      {
-        type: 'el-tab-pane',
-        config: {
-          label: 'Tab 2',
-          active: true,
-        },
-        children: [
-          {
-            type: 'j-button',
-            config: {
-              label: 'Button in Tab 2 (Active by default)',
-            },
-          },
-        ],
-      },
-    ]"
-  />
-</template>
-
-<script setup lang="ts"></script>
+<template>
+  <j-comp
+    type="j-tabs"
+    :children="[
+      {
+        type: 'el-tab-pane',
+        config: {
+          label: 'Tab 1',
+        },
+        children: [
+          {
+            type: 'j-button',
+            config: {
+              label: 'Button in Tab 1',
+            },
+          },
+        ],
+      },
+      {
+        type: 'el-tab-pane',
+        config: {
+          label: 'Tab 2',
+          active: true,
+        },
+        children: [
+          {
+            type: 'j-button',
+            config: {
+              label: 'Button in Tab 2 (Active by default)',
+            },
+          },
+        ],
+      },
+    ]"
+  />
+</template>
+
+<script setup lang="ts"></script>

package/docs/examples/count/basic.vue

@@ -1,101 +1,101 @@
-<template>
-  <div class="count-demo">
-    <div class="demo-item">
-      <p>基础计算 (1000 + 200):</p>
-      <j-count :format-json="formJSON" />
-    </div>
-
-    <div class="demo-item">
-      <p>千分位展示:</p>
-      <j-count :format-json="formJSON" thousand-separator />
-    </div>
-
-    <div class="demo-item">
-      <p>人民币大写:</p>
-      <j-count :format-json="formJSON" is-chinese />
-    </div>
-
-    <div class="demo-item">
-      <p>保留两位小数:</p>
-      <j-count :format-json="formJSON" :decimal="2" />
-    </div>
-
-    <!-- 计算公式 -->
-     <div class="demo-item">
-      <p>配置计算公式来计算结果:</p>
-      <j-input-count v-model="value" :list="list" @change="handleChange" />
-      <j-count :format-json="value" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useFormProvide } from '@a2simcode/ui'
-import { ref } from 'vue'
-
-
-// 模拟表单提供者，因为 Count 组件内部依赖注入
-const getValue = ({ id, i }: { id: string; i?: number }) => {
-    const mockData: Record<string, number> = {
-      price: 100,
-      quantity: 3,
-      'table1.price1': [100, 200],
-      'table1.quantity1': [1, 2]
-    }
-    return mockData[id] || 0
-  }
-  //@ts-ignore
-useFormProvide({ getValue: getValue })
-
-const formJSON =
-  '[{"value":1,"type":"num"},{"value":0,"type":"num"},{"value":0,"type":"num"},{"value":0,"type":"num"},{"value":"+","type":"num"},{"value":2,"type":"num"},{"value":0,"type":"num"},{"value":0,"type":"num"}]'
-
-
-const value = ref('')
-const list = [
-  {
-    label: '主表组件',
-    children: [
-      {
-        label: '价格',
-        value: 'price',
-      },
-      {
-        label: '数量',
-        value: 'quantity',
-      },
-    ],
-  },
-  {
-    label: '子表组件',
-    children: [
-      {
-        label: '价格',
-        value: 'table1.price1',
-      },
-      {
-        label: '数量',
-        value: 'table1.quantity1',
-      },
-    ],
-  },
-]
-
-const countRes = ref('')
-const handleChange = (list: any[]) => {
-  console.log(list, 'change', value)
-}
-</script>
-
-<style scoped>
-.count-demo {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-.demo-item p {
-  margin-bottom: 8px;
-  font-size: 14px;
-  color: var(--j-color-text-2);
-}
-</style>
+<template>
+  <div class="count-demo">
+    <div class="demo-item">
+      <p>基础计算 (1000 + 200):</p>
+      <j-count :format-json="formJSON" />
+    </div>
+
+    <div class="demo-item">
+      <p>千分位展示:</p>
+      <j-count :format-json="formJSON" thousand-separator />
+    </div>
+
+    <div class="demo-item">
+      <p>人民币大写:</p>
+      <j-count :format-json="formJSON" is-chinese />
+    </div>
+
+    <div class="demo-item">
+      <p>保留两位小数:</p>
+      <j-count :format-json="formJSON" :decimal="2" />
+    </div>
+
+    <!-- 计算公式 -->
+     <div class="demo-item">
+      <p>配置计算公式来计算结果:</p>
+      <j-input-count v-model="value" :list="list" @change="handleChange" />
+      <j-count :format-json="value" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useFormProvide } from '@a2simcode/ui'
+import { ref } from 'vue'
+
+
+// 模拟表单提供者，因为 Count 组件内部依赖注入
+const getValue = ({ id, i }: { id: string; i?: number }) => {
+    const mockData: Record<string, number> = {
+      price: 100,
+      quantity: 3,
+      'table1.price1': [100, 200],
+      'table1.quantity1': [1, 2]
+    }
+    return mockData[id] || 0
+  }
+  //@ts-ignore
+useFormProvide({ getValue: getValue })
+
+const formJSON =
+  '[{"value":1,"type":"num"},{"value":0,"type":"num"},{"value":0,"type":"num"},{"value":0,"type":"num"},{"value":"+","type":"num"},{"value":2,"type":"num"},{"value":0,"type":"num"},{"value":0,"type":"num"}]'
+
+
+const value = ref('')
+const list = [
+  {
+    label: '主表组件',
+    children: [
+      {
+        label: '价格',
+        value: 'price',
+      },
+      {
+        label: '数量',
+        value: 'quantity',
+      },
+    ],
+  },
+  {
+    label: '子表组件',
+    children: [
+      {
+        label: '价格',
+        value: 'table1.price1',
+      },
+      {
+        label: '数量',
+        value: 'table1.quantity1',
+      },
+    ],
+  },
+]
+
+const countRes = ref('')
+const handleChange = (list: any[]) => {
+  console.log(list, 'change', value)
+}
+</script>
+
+<style scoped>
+.count-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.demo-item p {
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: var(--j-color-text-2);
+}
+</style>

package/docs/examples/count-up/basic.vue

@@ -1,89 +1,89 @@
-<template>
-  <div class="count-up-demo">
-    <div class="demo-item">
-      <p>基础用法（0-1000）:</p>
-      <j-count-up :end-value="1000" />
-    </div>
-
-    <div class="demo-item">
-      <p>自定义起始值和小数位:</p>
-      <j-count-up :start-value="0" :end-value="99.99" :decimals="2" />
-    </div>
-
-    <div class="demo-item">
-      <p>自定义动画时间:</p>
-      <j-count-up :end-value="5000" :duration="5" />
-    </div>
-
-    <div class="demo-item">
-      <p>禁用动画（直接显示值）:</p>
-      <j-count-up :end-value="2024" :animation="false" />
-    </div>
-
-    <div class="demo-item">
-      <p>带回调的动画:</p>
-      <j-count-up :end-value="100" :callback="handleAnimationEnd" />
-      <p v-if="callbackMessage" style="color: var(--j-color-success); margin-top: 8px">
-        {{ callbackMessage }}
-      </p>
-    </div>
-
-    <div class="demo-item">
-      <p>动态更新值:</p>
-      <div style="display: flex; gap: 10px; align-items: center">
-        <j-count-up ref="countUpRef" :end-value="currentValue" :duration="1" />
-        <button @click="updateValue(500)">更新到500</button>
-        <button @click="updateValue(1500)">更新到1500</button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const countUpRef = ref()
-const currentValue = ref(0)
-const callbackMessage = ref('')
-
-const handleAnimationEnd = (countUp: any) => {
-  callbackMessage.value = `动画完成！最终值为: ${countUp.endVal}`
-  setTimeout(() => {
-    callbackMessage.value = ''
-  }, 3000)
-}
-
-const updateValue = (newValue: number) => {
-  currentValue.value = newValue
-}
-</script>
-
-<style scoped>
-.count-up-demo {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.demo-item p {
-  margin-bottom: 8px;
-  font-size: 14px;
-  color: var(--j-color-text-2);
-}
-
-button {
-  padding: 6px 12px;
-  border: 1px solid var(--j-color-border);
-  border-radius: 4px;
-  background-color: var(--j-color-bg-primary);
-  color: var(--j-color-text-1);
-  cursor: pointer;
-  transition: all 0.3s;
-  font-size: 12px;
-}
-
-button:hover {
-  border-color: var(--j-color-primary);
-  color: var(--j-color-primary);
-}
-</style>
+<template>
+  <div class="count-up-demo">
+    <div class="demo-item">
+      <p>基础用法（0-1000）:</p>
+      <j-count-up :end-value="1000" />
+    </div>
+
+    <div class="demo-item">
+      <p>自定义起始值和小数位:</p>
+      <j-count-up :start-value="0" :end-value="99.99" :decimals="2" />
+    </div>
+
+    <div class="demo-item">
+      <p>自定义动画时间:</p>
+      <j-count-up :end-value="5000" :duration="5" />
+    </div>
+
+    <div class="demo-item">
+      <p>禁用动画（直接显示值）:</p>
+      <j-count-up :end-value="2024" :animation="false" />
+    </div>
+
+    <div class="demo-item">
+      <p>带回调的动画:</p>
+      <j-count-up :end-value="100" :callback="handleAnimationEnd" />
+      <p v-if="callbackMessage" style="color: var(--j-color-success); margin-top: 8px">
+        {{ callbackMessage }}
+      </p>
+    </div>
+
+    <div class="demo-item">
+      <p>动态更新值:</p>
+      <div style="display: flex; gap: 10px; align-items: center">
+        <j-count-up ref="countUpRef" :end-value="currentValue" :duration="1" />
+        <button @click="updateValue(500)">更新到500</button>
+        <button @click="updateValue(1500)">更新到1500</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const countUpRef = ref()
+const currentValue = ref(0)
+const callbackMessage = ref('')
+
+const handleAnimationEnd = (countUp: any) => {
+  callbackMessage.value = `动画完成！最终值为: ${countUp.endVal}`
+  setTimeout(() => {
+    callbackMessage.value = ''
+  }, 3000)
+}
+
+const updateValue = (newValue: number) => {
+  currentValue.value = newValue
+}
+</script>
+
+<style scoped>
+.count-up-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.demo-item p {
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: var(--j-color-text-2);
+}
+
+button {
+  padding: 6px 12px;
+  border: 1px solid var(--j-color-border);
+  border-radius: 4px;
+  background-color: var(--j-color-bg-primary);
+  color: var(--j-color-text-1);
+  cursor: pointer;
+  transition: all 0.3s;
+  font-size: 12px;
+}
+
+button:hover {
+  border-color: var(--j-color-primary);
+  color: var(--j-color-primary);
+}
+</style>