@a2simcode/ui 0.0.154 → 0.0.155

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>

package/docs/examples/number/size.vue

@@ -1,42 +1,42 @@
-<template>
-  <div class="size-demo">
-    <div class="demo-item">
-      <p>Large Size:</p>
-      <j-number v-model="value" size="large" :min="1" :max="100" />
-    </div>
-    <div class="demo-item">
-      <p>Default Size:</p>
-      <j-number v-model="value" size="default" :min="1" :max="100" />
-    </div>
-    <div class="demo-item">
-      <p>Small Size:</p>
-      <j-number v-model="value" size="small" :min="1" :max="100" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value = ref(50)
-</script>
-
-<style scoped>
-.size-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="size-demo">
+    <div class="demo-item">
+      <p>Large Size:</p>
+      <j-number v-model="value" size="large" :min="1" :max="100" />
+    </div>
+    <div class="demo-item">
+      <p>Default Size:</p>
+      <j-number v-model="value" size="default" :min="1" :max="100" />
+    </div>
+    <div class="demo-item">
+      <p>Small Size:</p>
+      <j-number v-model="value" size="small" :min="1" :max="100" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref(50)
+</script>
+
+<style scoped>
+.size-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>

package/docs/examples/number/slots.vue

@@ -1,123 +1,123 @@
-<template>
-  <div class="slots-demo">
-    <div class="demo-section">
-      <h3>前缀和后缀</h3>
-      <div class="demo-row">
-        <div class="demo-item">
-          <p>使用属性设置前缀后缀</p>
-          <j-number v-model="value1" prefix="前缀" suffix="后缀"> </j-number>
-        </div>
-        <div class="demo-item">
-          <p>使用插槽设置前缀后缀</p>
-          <j-number v-model="value2">
-            <template #prefix>
-              <span>前缀</span>
-            </template>
-            <template #suffix>
-              <span>后缀</span>
-            </template>
-          </j-number>
-        </div>
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h3>自定义按钮图标</h3>
-      <div class="demo-row">
-        <div class="demo-item">
-          <p>自定义增加、减少按钮图标</p>
-          <j-number v-model="value3" :decrease-icon="decreaseIcon" :increase-icon="increaseIcon">
-          </j-number>
-        </div>
-        <div class="demo-item">
-          <p>自定义按钮图标 (字符串)</p>
-          <j-number v-model="value4" :decrease-icon="decreaseIcon" :increase-icon="increaseIcon">
-          </j-number>
-        </div>
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h3>控制按钮位置</h3>
-      <div class="demo-row">
-        <div class="demo-item">
-          <p>按钮在右侧 (默认)</p>
-          <j-number v-model="value5" :min="1" :max="100" controls-position="right" />
-        </div>
-        <div class="demo-item">
-          <p>显示控制按钮</p>
-          <j-number v-model="value6" :min="1" :max="100" :controls="true" />
-        </div>
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h3>其他高级属性</h3>
-      <div class="demo-row">
-        <div class="demo-item">
-          <p>数值对齐方式 (居中)</p>
-          <j-number v-model="value7" :align="'center'" />
-        </div>
-        <div class="demo-item">
-          <p>禁用科学计数法</p>
-          <j-number v-model="value8" :disabled-scientific="true" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value1 = ref(10)
-const value2 = ref(50)
-const value3 = ref(100)
-const value4 = ref(25)
-const value5 = ref(50)
-const value6 = ref(30)
-const value7 = ref(15)
-const value8 = ref(100)
-
-const decreaseIcon = 'mdi:arrow-down'
-const increaseIcon = 'mdi:arrow-up'
-</script>
-
-<style scoped>
-.slots-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="slots-demo">
+    <div class="demo-section">
+      <h3>前缀和后缀</h3>
+      <div class="demo-row">
+        <div class="demo-item">
+          <p>使用属性设置前缀后缀</p>
+          <j-number v-model="value1" prefix="前缀" suffix="后缀"> </j-number>
+        </div>
+        <div class="demo-item">
+          <p>使用插槽设置前缀后缀</p>
+          <j-number v-model="value2">
+            <template #prefix>
+              <span>前缀</span>
+            </template>
+            <template #suffix>
+              <span>后缀</span>
+            </template>
+          </j-number>
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>自定义按钮图标</h3>
+      <div class="demo-row">
+        <div class="demo-item">
+          <p>自定义增加、减少按钮图标</p>
+          <j-number v-model="value3" :decrease-icon="decreaseIcon" :increase-icon="increaseIcon">
+          </j-number>
+        </div>
+        <div class="demo-item">
+          <p>自定义按钮图标 (字符串)</p>
+          <j-number v-model="value4" :decrease-icon="decreaseIcon" :increase-icon="increaseIcon">
+          </j-number>
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>控制按钮位置</h3>
+      <div class="demo-row">
+        <div class="demo-item">
+          <p>按钮在右侧 (默认)</p>
+          <j-number v-model="value5" :min="1" :max="100" controls-position="right" />
+        </div>
+        <div class="demo-item">
+          <p>显示控制按钮</p>
+          <j-number v-model="value6" :min="1" :max="100" :controls="true" />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>其他高级属性</h3>
+      <div class="demo-row">
+        <div class="demo-item">
+          <p>数值对齐方式 (居中)</p>
+          <j-number v-model="value7" :align="'center'" />
+        </div>
+        <div class="demo-item">
+          <p>禁用科学计数法</p>
+          <j-number v-model="value8" :disabled-scientific="true" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref(10)
+const value2 = ref(50)
+const value3 = ref(100)
+const value4 = ref(25)
+const value5 = ref(50)
+const value6 = ref(30)
+const value7 = ref(15)
+const value8 = ref(100)
+
+const decreaseIcon = 'mdi:arrow-down'
+const increaseIcon = 'mdi:arrow-up'
+</script>
+
+<style scoped>
+.slots-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/step-strictly.vue

@@ -1,41 +1,41 @@
-<template>
-  <div class="step-strictly-demo">
-    <div class="demo-item">
-      <p>普通步长模式 (非严格)：</p>
-      <j-number v-model="value1" :min="0" :max="10" :step="2" />
-      <p>当前值: {{ value1 }} (允许输入非步长倍数)</p>
-    </div>
-    <div class="demo-item">
-      <p>严格步长模式 (step-strictly=true)：</p>
-      <j-number v-model="value2" :min="0" :max="10" :step="2" step-strictly />
-      <p>当前值: {{ value2 }} (只接受步长倍数)</p>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value1 = ref(0)
-const value2 = ref(0)
-</script>
-
-<style scoped>
-.step-strictly-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="step-strictly-demo">
+    <div class="demo-item">
+      <p>普通步长模式 (非严格)：</p>
+      <j-number v-model="value1" :min="0" :max="10" :step="2" />
+      <p>当前值: {{ value1 }} (允许输入非步长倍数)</p>
+    </div>
+    <div class="demo-item">
+      <p>严格步长模式 (step-strictly=true)：</p>
+      <j-number v-model="value2" :min="0" :max="10" :step="2" step-strictly />
+      <p>当前值: {{ value2 }} (只接受步长倍数)</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref(0)
+const value2 = ref(0)
+</script>
+
+<style scoped>
+.step-strictly-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>

package/docs/examples/number/step.vue

@@ -1,47 +1,47 @@
-<template>
-  <div class="step-demo">
-    <div class="demo-item">
-      <p>整数步长 (step=2)：</p>
-      <j-number v-model="value1" :min="0" :max="10" :step="2" />
-      <p>当前值: {{ value1 }}</p>
-    </div>
-    <div class="demo-item">
-      <p>小数步长 (step=0.1)：</p>
-      <j-number v-model="value2" :min="0" :max="10" :step="0.1" :precision="1" />
-      <p>当前值: {{ value2 }}</p>
-    </div>
-    <div class="demo-item">
-      <p>较大步长 (step=5)：</p>
-      <j-number v-model="value3" :min="0" :max="50" :step="5" />
-      <p>当前值: {{ value3 }}</p>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value1 = ref(0)
-const value2 = ref(0)
-const value3 = ref(0)
-</script>
-
-<style scoped>
-.step-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="step-demo">
+    <div class="demo-item">
+      <p>整数步长 (step=2)：</p>
+      <j-number v-model="value1" :min="0" :max="10" :step="2" />
+      <p>当前值: {{ value1 }}</p>
+    </div>
+    <div class="demo-item">
+      <p>小数步长 (step=0.1)：</p>
+      <j-number v-model="value2" :min="0" :max="10" :step="0.1" :precision="1" />
+      <p>当前值: {{ value2 }}</p>
+    </div>
+    <div class="demo-item">
+      <p>较大步长 (step=5)：</p>
+      <j-number v-model="value3" :min="0" :max="50" :step="5" />
+      <p>当前值: {{ value3 }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref(0)
+const value2 = ref(0)
+const value3 = ref(0)
+</script>
+
+<style scoped>
+.step-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>