@a2simcode/ui 0.0.55 → 0.0.57

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>

package/docs/examples/data-panel/basic.vue

@@ -1,110 +1,110 @@
-<template>
-  <div class="data-panel-demo">
-    <div class="demo-item">
-      <p>基础用法 - 带标题的面板:</p>
-      <j-data-panel title="数据面板">
-        <div style="padding: 16px">
-          <p>这是一个数据展示面板</p>
-          <p>可以在其中放置任何内容</p>
-        </div>
-      </j-data-panel>
-    </div>
-
-    <div class="demo-item">
-      <p>无标题面板:</p>
-      <j-data-panel>
-        <div style="padding: 16px">
-          <p>没有标题的面板</p>
-        </div>
-      </j-data-panel>
-    </div>
-
-    <div class="demo-item">
-      <p>带标题右侧内容:</p>
-      <j-data-panel title="用户数据">
-        <template #titleRight>
-          <j-button icon="mdi:refresh"></j-button>
-        </template>
-        <div style="padding: 16px">
-          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px">
-            <div>
-              <div style="color: var(--j-color-text-2); font-size: 12px; margin-bottom: 4px">
-                用户总数
-              </div>
-              <div style="font-size: 24px; font-weight: bold; color: var(--j-color-primary)">
-                1,234
-              </div>
-            </div>
-            <div>
-              <div style="color: var(--j-color-text-2); font-size: 12px; margin-bottom: 4px">
-                活跃用户
-              </div>
-              <div style="font-size: 24px; font-weight: bold; color: var(--j-color-success)">
-                856
-              </div>
-            </div>
-            <div>
-              <div style="color: var(--j-color-text-2); font-size: 12px; margin-bottom: 4px">
-                待审核
-              </div>
-              <div style="font-size: 24px; font-weight: bold; color: var(--j-color-warning)">
-                45
-              </div>
-            </div>
-            <div>
-              <div style="color: var(--j-color-text-2); font-size: 12px; margin-bottom: 4px">
-                异常
-              </div>
-              <div style="font-size: 24px; font-weight: bold; color: var(--j-color-danger)">12</div>
-            </div>
-          </div>
-        </div>
-      </j-data-panel>
-    </div>
-
-    <div class="demo-item">
-      <p>多个面板并排显示:</p>
-      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px">
-        <j-data-panel title="收入统计">
-          <div style="padding: 16px">
-            <div style="font-size: 20px; font-weight: bold; color: var(--j-color-primary)">
-              ¥ 128,500
-            </div>
-            <div style="color: var(--j-color-text-2); font-size: 12px; margin-top: 8px">
-              本月收入
-            </div>
-          </div>
-        </j-data-panel>
-        <j-data-panel title="支出统计">
-          <div style="padding: 16px">
-            <div style="font-size: 20px; font-weight: bold; color: var(--j-color-danger)">
-              ¥ 32,100
-            </div>
-            <div style="color: var(--j-color-text-2); font-size: 12px; margin-top: 8px">
-              本月支出
-            </div>
-          </div>
-        </j-data-panel>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-// 示例代码无需额外逻辑
-</script>
-
-<style scoped>
-.data-panel-demo {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.demo-item p {
-  margin-bottom: 12px;
-  font-size: 14px;
-  color: var(--j-color-text-2);
-  font-weight: 500;
-}
-</style>
+<template>
+  <div class="data-panel-demo">
+    <div class="demo-item">
+      <p>基础用法 - 带标题的面板:</p>
+      <j-data-panel title="数据面板">
+        <div style="padding: 16px">
+          <p>这是一个数据展示面板</p>
+          <p>可以在其中放置任何内容</p>
+        </div>
+      </j-data-panel>
+    </div>
+
+    <div class="demo-item">
+      <p>无标题面板:</p>
+      <j-data-panel>
+        <div style="padding: 16px">
+          <p>没有标题的面板</p>
+        </div>
+      </j-data-panel>
+    </div>
+
+    <div class="demo-item">
+      <p>带标题右侧内容:</p>
+      <j-data-panel title="用户数据">
+        <template #titleRight>
+          <j-button icon="mdi:refresh"></j-button>
+        </template>
+        <div style="padding: 16px">
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px">
+            <div>
+              <div style="color: var(--j-color-text-2); font-size: 12px; margin-bottom: 4px">
+                用户总数
+              </div>
+              <div style="font-size: 24px; font-weight: bold; color: var(--j-color-primary)">
+                1,234
+              </div>
+            </div>
+            <div>
+              <div style="color: var(--j-color-text-2); font-size: 12px; margin-bottom: 4px">
+                活跃用户
+              </div>
+              <div style="font-size: 24px; font-weight: bold; color: var(--j-color-success)">
+                856
+              </div>
+            </div>
+            <div>
+              <div style="color: var(--j-color-text-2); font-size: 12px; margin-bottom: 4px">
+                待审核
+              </div>
+              <div style="font-size: 24px; font-weight: bold; color: var(--j-color-warning)">
+                45
+              </div>
+            </div>
+            <div>
+              <div style="color: var(--j-color-text-2); font-size: 12px; margin-bottom: 4px">
+                异常
+              </div>
+              <div style="font-size: 24px; font-weight: bold; color: var(--j-color-danger)">12</div>
+            </div>
+          </div>
+        </div>
+      </j-data-panel>
+    </div>
+
+    <div class="demo-item">
+      <p>多个面板并排显示:</p>
+      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px">
+        <j-data-panel title="收入统计">
+          <div style="padding: 16px">
+            <div style="font-size: 20px; font-weight: bold; color: var(--j-color-primary)">
+              ¥ 128,500
+            </div>
+            <div style="color: var(--j-color-text-2); font-size: 12px; margin-top: 8px">
+              本月收入
+            </div>
+          </div>
+        </j-data-panel>
+        <j-data-panel title="支出统计">
+          <div style="padding: 16px">
+            <div style="font-size: 20px; font-weight: bold; color: var(--j-color-danger)">
+              ¥ 32,100
+            </div>
+            <div style="color: var(--j-color-text-2); font-size: 12px; margin-top: 8px">
+              本月支出
+            </div>
+          </div>
+        </j-data-panel>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 示例代码无需额外逻辑
+</script>
+
+<style scoped>
+.data-panel-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.demo-item p {
+  margin-bottom: 12px;
+  font-size: 14px;
+  color: var(--j-color-text-2);
+  font-weight: 500;
+}
+</style>

package/docs/examples/dialog/basic.vue

@@ -1,36 +1,36 @@
-<template>
-  <div>
-    <j-button label="打开弹窗" @click="visible = true" />
-    <j-dialog
-      v-model:visible="visible"
-      title="基础弹窗"
-      :width="600"
-      :height="400"
-      @ok="handleOk"
-      @cancel="handleCancel"
-    >
-      <div style="padding: 16px">
-        <p>这是一个基础的弹窗示例。</p>
-        <p>弹窗支持拖拽、缩放等功能。</p>
-      </div>
-    </j-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const visible = ref(false)
-
-const handleOk = (showLoading: any, hideLoading: any) => {
-  showLoading('保存中...')
-  setTimeout(() => {
-    hideLoading()
-    visible.value = false
-  }, 1000)
-}
-
-const handleCancel = () => {
-  visible.value = false
-}
-</script>
+<template>
+  <div>
+    <j-button label="打开弹窗" @click="visible = true" />
+    <j-dialog
+      v-model:visible="visible"
+      title="基础弹窗"
+      :width="600"
+      :height="400"
+      @ok="handleOk"
+      @cancel="handleCancel"
+    >
+      <div style="padding: 16px">
+        <p>这是一个基础的弹窗示例。</p>
+        <p>弹窗支持拖拽、缩放等功能。</p>
+      </div>
+    </j-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const visible = ref(false)
+
+const handleOk = (showLoading: any, hideLoading: any) => {
+  showLoading('保存中...')
+  setTimeout(() => {
+    hideLoading()
+    visible.value = false
+  }, 1000)
+}
+
+const handleCancel = () => {
+  visible.value = false
+}
+</script>

package/docs/examples/dialog/custom-buttons.vue

@@ -1,44 +1,44 @@
-<template>
-  <div>
-    <j-button label="自定义按钮" @click="visible = true" />
-    <j-dialog
-      v-model:visible="visible"
-      title="自定义按钮弹窗"
-      :width="600"
-      :height="400"
-      :has-save-btn="false"
-      :buttons="buttons"
-    >
-      <div style="padding: 16px">
-        <p>这个弹窗使用了自定义按钮配置。</p>
-      </div>
-    </j-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { ElMessage } from 'element-plus'
-
-const visible = ref(false)
-
-const buttons = [
-  {
-    prop: 'confirm',
-    label: '确认',
-    type: 'primary',
-    click: () => {
-      ElMessage.success('点击了确认按钮')
-      visible.value = false
-    },
-  },
-  {
-    prop: 'delete',
-    label: '删除',
-    danger: true,
-    click: () => {
-      ElMessage.warning('点击了删除按钮')
-    },
-  },
-]
-</script>
+<template>
+  <div>
+    <j-button label="自定义按钮" @click="visible = true" />
+    <j-dialog
+      v-model:visible="visible"
+      title="自定义按钮弹窗"
+      :width="600"
+      :height="400"
+      :has-save-btn="false"
+      :buttons="buttons"
+    >
+      <div style="padding: 16px">
+        <p>这个弹窗使用了自定义按钮配置。</p>
+      </div>
+    </j-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const visible = ref(false)
+
+const buttons = [
+  {
+    prop: 'confirm',
+    label: '确认',
+    type: 'primary',
+    click: () => {
+      ElMessage.success('点击了确认按钮')
+      visible.value = false
+    },
+  },
+  {
+    prop: 'delete',
+    label: '删除',
+    danger: true,
+    click: () => {
+      ElMessage.warning('点击了删除按钮')
+    },
+  },
+]
+</script>

package/docs/examples/dialog/fullscreen.vue

@@ -1,23 +1,23 @@
-<template>
-  <div>
-    <j-button label="可全屏弹窗" @click="visible = true" />
-    <j-dialog
-      v-model:visible="visible"
-      title="全屏弹窗"
-      :show-full-screen-btn="true"
-      :width="600"
-      :height="400"
-    >
-      <div style="padding: 16px">
-        <p>点击右上角的全屏按钮可以切换全屏显示。</p>
-        <p>全屏状态下可以再次点击退出全屏。</p>
-      </div>
-    </j-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const visible = ref(false)
-</script>
+<template>
+  <div>
+    <j-button label="可全屏弹窗" @click="visible = true" />
+    <j-dialog
+      v-model:visible="visible"
+      title="全屏弹窗"
+      :show-full-screen-btn="true"
+      :width="600"
+      :height="400"
+    >
+      <div style="padding: 16px">
+        <p>点击右上角的全屏按钮可以切换全屏显示。</p>
+        <p>全屏状态下可以再次点击退出全屏。</p>
+      </div>
+    </j-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const visible = ref(false)
+</script>

package/docs/examples/dialog/no-mask.vue

@@ -1,17 +1,17 @@
-<template>
-  <div>
-    <j-button label="无遮罩弹窗" @click="visible = true" />
-    <j-dialog v-model:visible="visible" title="无遮罩弹窗" :width="500" :height="350" :mask="false">
-      <div style="padding: 16px">
-        <p>这个弹窗没有遮罩层。</p>
-        <p>你可以与页面其他内容进行交互。</p>
-      </div>
-    </j-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const visible = ref(false)
-</script>
+<template>
+  <div>
+    <j-button label="无遮罩弹窗" @click="visible = true" />
+    <j-dialog v-model:visible="visible" title="无遮罩弹窗" :width="500" :height="350" :mask="false">
+      <div style="padding: 16px">
+        <p>这个弹窗没有遮罩层。</p>
+        <p>你可以与页面其他内容进行交互。</p>
+      </div>
+    </j-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const visible = ref(false)
+</script>