@a2simcode/ui 0.0.54 → 0.0.56

package/docs/examples/menu/vertical.vue

@@ -1,46 +1,46 @@
-<template>
-  <div style="height: 300px; width: 200px">
-    <j-menu :menus="menuList" :active-id="activeId" mode="vertical" @click="handleClick" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const activeId = ref('1')
-
-const menuList = ref([
-  {
-    label: '首页',
-    value: '1',
-    icon: 'material-symbols-light:home',
-  },
-  {
-    label: '工作台',
-    value: '2',
-    icon: 'material-symbols-light:dashboard',
-    children: [
-      {
-        label: '用户管理',
-        value: '2-1',
-        icon: 'material-symbols-light:person',
-      },
-      {
-        label: '角色管理',
-        value: '2-2',
-        icon: 'material-symbols-light:group',
-      },
-    ],
-  },
-  {
-    label: '系统设置',
-    value: '3',
-    icon: 'material-symbols-light:settings',
-  },
-])
-
-const handleClick = (item: any) => {
-  console.log('点击菜单项：', item)
-  activeId.value = item.value
-}
-</script>
+<template>
+  <div style="height: 300px; width: 200px">
+    <j-menu :menus="menuList" :active-id="activeId" mode="vertical" @click="handleClick" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeId = ref('1')
+
+const menuList = ref([
+  {
+    label: '首页',
+    value: '1',
+    icon: 'material-symbols-light:home',
+  },
+  {
+    label: '工作台',
+    value: '2',
+    icon: 'material-symbols-light:dashboard',
+    children: [
+      {
+        label: '用户管理',
+        value: '2-1',
+        icon: 'material-symbols-light:person',
+      },
+      {
+        label: '角色管理',
+        value: '2-2',
+        icon: 'material-symbols-light:group',
+      },
+    ],
+  },
+  {
+    label: '系统设置',
+    value: '3',
+    icon: 'material-symbols-light:settings',
+  },
+])
+
+const handleClick = (item: any) => {
+  console.log('点击菜单项：', item)
+  activeId.value = item.value
+}
+</script>

package/docs/examples/number/advanced.vue

@@ -1,143 +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>禁用科学计数法 (disabledScientific)</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>禁用科学计数法：</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>
+<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>禁用科学计数法 (disabledScientific)</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>禁用科学计数法：</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

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

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