@a2simcode/ui 0.0.154 → 0.0.156

package/docs/examples/utils/common.vue

@@ -1,153 +1,153 @@
-<template>
-  <div class="utils-demo">
-    <h3>通用工具方法示例</h3>
-
-    <div class="demo-section">
-      <h4>1. deepClone - 深拷贝对象</h4>
-      <div class="demo-content">
-        <p>原始对象: {{ JSON.stringify(originalObj) }}</p>
-        <p>深拷贝后: {{ JSON.stringify(clonedObj) }}</p>
-        <j-button label="修改拷贝对象" @click="modifyCloned" />
-        <p style="color: #67c23a">💡 修改拷贝对象不会影响原始对象</p>
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h4>2. buildUUID - 生成UUID</h4>
-      <div class="demo-content">
-        <p>UUID: {{ uuid }}</p>
-        <j-button label="生成新UUID" @click="generateUUID" />
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h4>3. buildShortUUID - 生成短UUID</h4>
-      <div class="demo-content">
-        <p>短UUID: {{ shortUUID }}</p>
-        <j-button label="生成新短UUID" @click="generateShortUUID" />
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h4>4. set - 通过路径设置对象属性</h4>
-      <div class="demo-content">
-        <p>对象: {{ JSON.stringify(pathObj) }}</p>
-        <j-button label="设置 user.profile.name = 'Alice'" @click="setByPath" />
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h4>5. pagination - 数组分页</h4>
-      <div class="demo-content">
-        <p>数据总数: {{ dataList.length }}</p>
-        <p>当前页: {{ currentPage }}, 每页: {{ pageSize }}</p>
-        <p>当前页数据: {{ JSON.stringify(currentPageData) }}</p>
-        <j-button label="下一页" @click="nextPage" />
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h4>6. numberToChinese - 数字转中文</h4>
-      <div class="demo-content">
-        <j-input v-model="numberInput" placeholder="输入数字" style="width: 200px" />
-        <p>中文: {{ chineseNumber }}</p>
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h4>7. numberToThousandSeparator - 千分位分隔符</h4>
-      <div class="demo-content">
-        <j-input v-model="thousandInput" placeholder="输入数字" style="width: 200px" />
-        <p>格式化: {{ formattedNumber }}</p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed } from 'vue'
-import {
-  deepClone,
-  buildUUID,
-  buildShortUUID,
-  set,
-  pagination,
-  numberToChinese,
-  numberToThousandSeparator,
-} from '@/core'
-
-// 深拷贝示例
-const originalObj = ref({ name: '张三', age: 25, hobbies: ['读书', '运动'] })
-const clonedObj = ref(deepClone(originalObj.value))
-
-const modifyCloned = () => {
-  clonedObj.value.name = '李四'
-  clonedObj.value.hobbies.push('音乐')
-}
-
-// UUID示例
-const uuid = ref(buildUUID())
-const generateUUID = () => {
-  uuid.value = buildUUID()
-}
-
-// 短UUID示例
-const shortUUID = ref(buildShortUUID('prefix'))
-const generateShortUUID = () => {
-  shortUUID.value = buildShortUUID('prefix')
-}
-
-// 路径设置示例
-const pathObj = ref({ user: {} })
-const setByPath = () => {
-  set(pathObj.value, 'user.profile.name', 'Alice')
-  set(pathObj.value, 'user.age', 30)
-}
-
-// 分页示例
-const dataList = ref(Array.from({ length: 50 }, (_, i) => `项目${i + 1}`))
-const currentPage = ref(1)
-const pageSize = ref(5)
-const currentPageData = computed(() => {
-  return pagination(currentPage.value, pageSize.value, dataList.value)
-})
-const nextPage = () => {
-  if (currentPage.value * pageSize.value < dataList.value.length) {
-    currentPage.value++
-  }
-}
-
-// 数字转中文示例
-const numberInput = ref('12345.67')
-const chineseNumber = computed(() => {
-  return numberToChinese(numberInput.value)
-})
-
-// 千分位分隔符示例
-const thousandInput = ref('1234567.89')
-const formattedNumber = computed(() => {
-  return numberToThousandSeparator(thousandInput.value)
-})
-</script>
-
-<style scoped>
-.utils-demo {
-  padding: 20px;
-}
-.demo-section {
-  margin-bottom: 30px;
-  padding: 15px;
-  border: 1px solid #eee;
-  border-radius: 4px;
-}
-.demo-section h4 {
-  margin-top: 0;
-  color: #409eff;
-}
-.demo-content {
-  margin-top: 10px;
-}
-.demo-content p {
-  margin: 8px 0;
-}
-</style>
+<template>
+  <div class="utils-demo">
+    <h3>通用工具方法示例</h3>
+
+    <div class="demo-section">
+      <h4>1. deepClone - 深拷贝对象</h4>
+      <div class="demo-content">
+        <p>原始对象: {{ JSON.stringify(originalObj) }}</p>
+        <p>深拷贝后: {{ JSON.stringify(clonedObj) }}</p>
+        <j-button label="修改拷贝对象" @click="modifyCloned" />
+        <p style="color: #67c23a">💡 修改拷贝对象不会影响原始对象</p>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h4>2. buildUUID - 生成UUID</h4>
+      <div class="demo-content">
+        <p>UUID: {{ uuid }}</p>
+        <j-button label="生成新UUID" @click="generateUUID" />
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h4>3. buildShortUUID - 生成短UUID</h4>
+      <div class="demo-content">
+        <p>短UUID: {{ shortUUID }}</p>
+        <j-button label="生成新短UUID" @click="generateShortUUID" />
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h4>4. set - 通过路径设置对象属性</h4>
+      <div class="demo-content">
+        <p>对象: {{ JSON.stringify(pathObj) }}</p>
+        <j-button label="设置 user.profile.name = 'Alice'" @click="setByPath" />
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h4>5. pagination - 数组分页</h4>
+      <div class="demo-content">
+        <p>数据总数: {{ dataList.length }}</p>
+        <p>当前页: {{ currentPage }}, 每页: {{ pageSize }}</p>
+        <p>当前页数据: {{ JSON.stringify(currentPageData) }}</p>
+        <j-button label="下一页" @click="nextPage" />
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h4>6. numberToChinese - 数字转中文</h4>
+      <div class="demo-content">
+        <j-input v-model="numberInput" placeholder="输入数字" style="width: 200px" />
+        <p>中文: {{ chineseNumber }}</p>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h4>7. numberToThousandSeparator - 千分位分隔符</h4>
+      <div class="demo-content">
+        <j-input v-model="thousandInput" placeholder="输入数字" style="width: 200px" />
+        <p>格式化: {{ formattedNumber }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import {
+  deepClone,
+  buildUUID,
+  buildShortUUID,
+  set,
+  pagination,
+  numberToChinese,
+  numberToThousandSeparator,
+} from '@/core'
+
+// 深拷贝示例
+const originalObj = ref({ name: '张三', age: 25, hobbies: ['读书', '运动'] })
+const clonedObj = ref(deepClone(originalObj.value))
+
+const modifyCloned = () => {
+  clonedObj.value.name = '李四'
+  clonedObj.value.hobbies.push('音乐')
+}
+
+// UUID示例
+const uuid = ref(buildUUID())
+const generateUUID = () => {
+  uuid.value = buildUUID()
+}
+
+// 短UUID示例
+const shortUUID = ref(buildShortUUID('prefix'))
+const generateShortUUID = () => {
+  shortUUID.value = buildShortUUID('prefix')
+}
+
+// 路径设置示例
+const pathObj = ref({ user: {} })
+const setByPath = () => {
+  set(pathObj.value, 'user.profile.name', 'Alice')
+  set(pathObj.value, 'user.age', 30)
+}
+
+// 分页示例
+const dataList = ref(Array.from({ length: 50 }, (_, i) => `项目${i + 1}`))
+const currentPage = ref(1)
+const pageSize = ref(5)
+const currentPageData = computed(() => {
+  return pagination(currentPage.value, pageSize.value, dataList.value)
+})
+const nextPage = () => {
+  if (currentPage.value * pageSize.value < dataList.value.length) {
+    currentPage.value++
+  }
+}
+
+// 数字转中文示例
+const numberInput = ref('12345.67')
+const chineseNumber = computed(() => {
+  return numberToChinese(numberInput.value)
+})
+
+// 千分位分隔符示例
+const thousandInput = ref('1234567.89')
+const formattedNumber = computed(() => {
+  return numberToThousandSeparator(thousandInput.value)
+})
+</script>
+
+<style scoped>
+.utils-demo {
+  padding: 20px;
+}
+.demo-section {
+  margin-bottom: 30px;
+  padding: 15px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+.demo-section h4 {
+  margin-top: 0;
+  color: #409eff;
+}
+.demo-content {
+  margin-top: 10px;
+}
+.demo-content p {
+  margin: 8px 0;
+}
+</style>

package/docs/examples/utils/date.vue

@@ -1,56 +1,56 @@
-<template>
-  <div class="utils-demo">
-    <h3>日期工具方法示例</h3>
-
-    <div class="demo-section">
-      <h4>1. formatToDateTime - 格式化为日期时间</h4>
-      <div class="demo-content">
-        <p>当前时间: {{ formatToDateTime(currentDate) }}</p>
-        <p>自定义格式: {{ formatToDateTime(currentDate, 'YYYY年MM月DD日 HH:mm:ss') }}</p>
-        <j-button label="更新时间" @click="updateTime" />
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h4>2. formatToDate - 格式化为日期</h4>
-      <div class="demo-content">
-        <p>当前日期: {{ formatToDate(currentDate) }}</p>
-        <p>自定义格式: {{ formatToDate(currentDate, 'YYYY/MM/DD') }}</p>
-        <p style="color: #67c23a">💡 常用于日期选择器的值格式化</p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { formatToDateTime, formatToDate } from '@/core'
-
-const currentDate = ref(new Date())
-
-const updateTime = () => {
-  currentDate.value = new Date()
-}
-</script>
-
-<style scoped>
-.utils-demo {
-  padding: 20px;
-}
-.demo-section {
-  margin-bottom: 30px;
-  padding: 15px;
-  border: 1px solid #eee;
-  border-radius: 4px;
-}
-.demo-section h4 {
-  margin-top: 0;
-  color: #409eff;
-}
-.demo-content {
-  margin-top: 10px;
-}
-.demo-content p {
-  margin: 8px 0;
-}
-</style>
+<template>
+  <div class="utils-demo">
+    <h3>日期工具方法示例</h3>
+
+    <div class="demo-section">
+      <h4>1. formatToDateTime - 格式化为日期时间</h4>
+      <div class="demo-content">
+        <p>当前时间: {{ formatToDateTime(currentDate) }}</p>
+        <p>自定义格式: {{ formatToDateTime(currentDate, 'YYYY年MM月DD日 HH:mm:ss') }}</p>
+        <j-button label="更新时间" @click="updateTime" />
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h4>2. formatToDate - 格式化为日期</h4>
+      <div class="demo-content">
+        <p>当前日期: {{ formatToDate(currentDate) }}</p>
+        <p>自定义格式: {{ formatToDate(currentDate, 'YYYY/MM/DD') }}</p>
+        <p style="color: #67c23a">💡 常用于日期选择器的值格式化</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { formatToDateTime, formatToDate } from '@/core'
+
+const currentDate = ref(new Date())
+
+const updateTime = () => {
+  currentDate.value = new Date()
+}
+</script>
+
+<style scoped>
+.utils-demo {
+  padding: 20px;
+}
+.demo-section {
+  margin-bottom: 30px;
+  padding: 15px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+.demo-section h4 {
+  margin-top: 0;
+  color: #409eff;
+}
+.demo-content {
+  margin-top: 10px;
+}
+.demo-content p {
+  margin: 8px 0;
+}
+</style>

package/docs/examples/utils/dom.vue

@@ -1,52 +1,52 @@
-<template>
-  <div class="utils-demo">
-    <h3>DOM工具方法示例</h3>
-
-    <div class="demo-section">
-      <h4>fullScreenLoading - 全屏加载</h4>
-      <div class="demo-content">
-        <j-button label="显示全屏加载" type="primary" @click="showLoading" />
-        <j-button label="隐藏全屏加载" @click="hideLoading" />
-        <p style="color: #67c23a">💡 点击按钮查看全屏加载效果,3秒后自动关闭</p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { fullScreenLoading } from '@/core'
-
-const showLoading = () => {
-  fullScreenLoading(true)
-  // 3秒后自动关闭
-  setTimeout(() => {
-    fullScreenLoading(false)
-  }, 3000)
-}
-
-const hideLoading = () => {
-  fullScreenLoading(false)
-}
-</script>
-
-<style scoped>
-.utils-demo {
-  padding: 20px;
-}
-.demo-section {
-  margin-bottom: 30px;
-  padding: 15px;
-  border: 1px solid #eee;
-  border-radius: 4px;
-}
-.demo-section h4 {
-  margin-top: 0;
-  color: #409eff;
-}
-.demo-content {
-  margin-top: 10px;
-}
-.demo-content p {
-  margin: 8px 0;
-}
-</style>
+<template>
+  <div class="utils-demo">
+    <h3>DOM工具方法示例</h3>
+
+    <div class="demo-section">
+      <h4>fullScreenLoading - 全屏加载</h4>
+      <div class="demo-content">
+        <j-button label="显示全屏加载" type="primary" @click="showLoading" />
+        <j-button label="隐藏全屏加载" @click="hideLoading" />
+        <p style="color: #67c23a">💡 点击按钮查看全屏加载效果,3秒后自动关闭</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { fullScreenLoading } from '@/core'
+
+const showLoading = () => {
+  fullScreenLoading(true)
+  // 3秒后自动关闭
+  setTimeout(() => {
+    fullScreenLoading(false)
+  }, 3000)
+}
+
+const hideLoading = () => {
+  fullScreenLoading(false)
+}
+</script>
+
+<style scoped>
+.utils-demo {
+  padding: 20px;
+}
+.demo-section {
+  margin-bottom: 30px;
+  padding: 15px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+.demo-section h4 {
+  margin-top: 0;
+  color: #409eff;
+}
+.demo-content {
+  margin-top: 10px;
+}
+.demo-content p {
+  margin: 8px 0;
+}
+</style>

package/docs/examples/utils/is.vue

@@ -1,70 +1,70 @@
-<template>
-  <div class="utils-demo">
-    <h3>类型判断工具方法示例</h3>
-
-    <div class="demo-section">
-      <h4>1. isArray - 判断是否为数组</h4>
-      <div class="demo-content">
-        <p>测试值: {{ JSON.stringify(testArray) }}</p>
-        <p>是否为数组: {{ isArray(testArray) ? '是' : '否' }}</p>
-        <p>测试值: {{ testString }}</p>
-        <p>是否为数组: {{ isArray(testString) ? '是' : '否' }}</p>
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h4>2. isObject - 判断是否为对象</h4>
-      <div class="demo-content">
-        <p>测试值: {{ JSON.stringify(testObj) }}</p>
-        <p>是否为对象: {{ isObject(testObj) ? '是' : '否' }}</p>
-        <p>测试值: {{ testNull }}</p>
-        <p>是否为对象: {{ isObject(testNull) ? '是' : '否' }}</p>
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h4>3. isNullOrEmpty - 判断是否为空</h4>
-      <div class="demo-content">
-        <p>null: {{ isNullOrEmpty(null) ? '是空' : '不是空' }}</p>
-        <p>undefined: {{ isNullOrEmpty(undefined) ? '是空' : '不是空' }}</p>
-        <p>'': {{ isNullOrEmpty('') ? '是空' : '不是空' }}</p>
-        <p>[]: {{ isNullOrEmpty([]) ? '是空' : '不是空' }}</p>
-        <p>{}: {{ isNullOrEmpty({}) ? '是空' : '不是空' }}</p>
-        <p>'hello': {{ isNullOrEmpty('hello') ? '是空' : '不是空' }}</p>
-        <p style="color: #67c23a">💡 可用于表单验证,判断值是否有效</p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { isArray, isObject, isNullOrEmpty } from '@/core'
-
-const testArray = ref([1, 2, 3])
-const testString = ref('hello')
-const testObj = ref({ name: '测试' })
-const testNull = ref(null)
-</script>
-
-<style scoped>
-.utils-demo {
-  padding: 20px;
-}
-.demo-section {
-  margin-bottom: 30px;
-  padding: 15px;
-  border: 1px solid #eee;
-  border-radius: 4px;
-}
-.demo-section h4 {
-  margin-top: 0;
-  color: #409eff;
-}
-.demo-content {
-  margin-top: 10px;
-}
-.demo-content p {
-  margin: 8px 0;
-}
-</style>
+<template>
+  <div class="utils-demo">
+    <h3>类型判断工具方法示例</h3>
+
+    <div class="demo-section">
+      <h4>1. isArray - 判断是否为数组</h4>
+      <div class="demo-content">
+        <p>测试值: {{ JSON.stringify(testArray) }}</p>
+        <p>是否为数组: {{ isArray(testArray) ? '是' : '否' }}</p>
+        <p>测试值: {{ testString }}</p>
+        <p>是否为数组: {{ isArray(testString) ? '是' : '否' }}</p>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h4>2. isObject - 判断是否为对象</h4>
+      <div class="demo-content">
+        <p>测试值: {{ JSON.stringify(testObj) }}</p>
+        <p>是否为对象: {{ isObject(testObj) ? '是' : '否' }}</p>
+        <p>测试值: {{ testNull }}</p>
+        <p>是否为对象: {{ isObject(testNull) ? '是' : '否' }}</p>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h4>3. isNullOrEmpty - 判断是否为空</h4>
+      <div class="demo-content">
+        <p>null: {{ isNullOrEmpty(null) ? '是空' : '不是空' }}</p>
+        <p>undefined: {{ isNullOrEmpty(undefined) ? '是空' : '不是空' }}</p>
+        <p>'': {{ isNullOrEmpty('') ? '是空' : '不是空' }}</p>
+        <p>[]: {{ isNullOrEmpty([]) ? '是空' : '不是空' }}</p>
+        <p>{}: {{ isNullOrEmpty({}) ? '是空' : '不是空' }}</p>
+        <p>'hello': {{ isNullOrEmpty('hello') ? '是空' : '不是空' }}</p>
+        <p style="color: #67c23a">💡 可用于表单验证,判断值是否有效</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { isArray, isObject, isNullOrEmpty } from '@/core'
+
+const testArray = ref([1, 2, 3])
+const testString = ref('hello')
+const testObj = ref({ name: '测试' })
+const testNull = ref(null)
+</script>
+
+<style scoped>
+.utils-demo {
+  padding: 20px;
+}
+.demo-section {
+  margin-bottom: 30px;
+  padding: 15px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+.demo-section h4 {
+  margin-top: 0;
+  color: #409eff;
+}
+.demo-content {
+  margin-top: 10px;
+}
+.demo-content p {
+  margin: 8px 0;
+}
+</style>