refactor(numeric): refactor numeric theme vars (#2200)

opentiny · Sep 29, 2024 · 356de96 · 356de96
1 parent 41f9ca8
commit 356de96
Show file tree

Hide file tree

Showing 7 changed files with 161 additions and 139 deletions.
diff --git a/examples/sites/demos/pc/app/numeric/dynamic-disabled-composition-api.vue b/examples/sites/demos/pc/app/numeric/dynamic-disabled-composition-api.vue
@@ -2,6 +2,9 @@
   <div class="f-r f-box-center">
     <span>全部禁用：</span>
     <tiny-numeric v-model="value1" :disabled="disabled" class="mr20"></tiny-numeric>
+    <tiny-numeric v-model="value1" :disabled="disabled" unit="kg" class="mr20"></tiny-numeric>
+    <tiny-numeric v-model="value1" :disabled="disabled" :controls="false" show-left class="mr20"></tiny-numeric>
+    <tiny-numeric v-model="value1" :disabled="disabled" controls-position="right" class="mr20"></tiny-numeric>
     <span>部分禁用：</span>
     <tiny-numeric v-model="value2" :min="min" :max="max"></tiny-numeric>
   </div>
@@ -17,3 +20,9 @@ const disabled = ref(true)
 const min = ref(0)
 const max = ref(10)
 </script>
+
+<style scoped>
+.mr20 {
+  margin-right: 20px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/numeric/dynamic-disabled.vue b/examples/sites/demos/pc/app/numeric/dynamic-disabled.vue
@@ -2,6 +2,9 @@
   <div class="f-r f-box-center">
     <span>全部禁用：</span>
     <tiny-numeric v-model="value1" :disabled="disabled" class="mr20"></tiny-numeric>
+    <tiny-numeric v-model="value1" :disabled="disabled" unit="kg" class="mr20"></tiny-numeric>
+    <tiny-numeric v-model="value1" :disabled="disabled" :controls="false" show-left class="mr20"></tiny-numeric>
+    <tiny-numeric v-model="value1" :disabled="disabled" controls-position="right" class="mr20"></tiny-numeric>
     <span>部分禁用：</span>
     <tiny-numeric v-model="value2" :min="min" :max="max"></tiny-numeric>
   </div>
@@ -25,3 +28,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.mr20 {
+  margin-right: 20px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/numeric/numeric-size-composition-api.vue b/examples/sites/demos/pc/app/numeric/numeric-size-composition-api.vue
@@ -2,11 +2,11 @@
   <div>
     <tiny-numeric v-model="value" size="medium"></tiny-numeric>
     <br /><br />
+    <tiny-numeric v-model="value"></tiny-numeric>
+    <br /><br />
     <tiny-numeric v-model="value" size="small"></tiny-numeric>
     <br /><br />
     <tiny-numeric v-model="value" size="mini"></tiny-numeric>
-    <br /><br />
-    <tiny-numeric v-model="value"></tiny-numeric>
   </div>
 </template>
 

diff --git a/examples/sites/demos/pc/app/numeric/numeric-size.spec.ts b/examples/sites/demos/pc/app/numeric/numeric-size.spec.ts
@@ -12,14 +12,14 @@ test('尺寸', async ({ page }) => {
   await largeNumeric.locator('.tiny-numeric__increase').click()
 
   // small尺寸
-  const smallNumeric = page.locator('.tiny-numeric').nth(1)
+  const smallNumeric = page.locator('.tiny-numeric').nth(2)
   await expect(smallNumeric).toHaveClass(/tiny-numeric--small/)
   await smallNumeric.getByRole('spinbutton').fill('111')
   await smallNumeric.locator('.tiny-numeric__decrease').click()
   await smallNumeric.locator('.tiny-numeric__increase').click()
 
   // mini尺寸
-  const miniNumeric = page.locator('.tiny-numeric').nth(2)
+  const miniNumeric = page.locator('.tiny-numeric').nth(3)
   await expect(miniNumeric).toHaveClass(/tiny-numeric--mini/)
   await miniNumeric.getByRole('spinbutton').fill('100')
   await miniNumeric.locator('.tiny-numeric__decrease').click()

diff --git a/examples/sites/demos/pc/app/numeric/numeric-size.vue b/examples/sites/demos/pc/app/numeric/numeric-size.vue
@@ -2,11 +2,11 @@
   <div>
     <tiny-numeric v-model="value" size="medium"></tiny-numeric>
     <br /><br />
+    <tiny-numeric v-model="value"></tiny-numeric>
+    <br /><br />
     <tiny-numeric v-model="value" size="small"></tiny-numeric>
     <br /><br />
     <tiny-numeric v-model="value" size="mini"></tiny-numeric>
-    <br /><br />
-    <tiny-numeric v-model="value"></tiny-numeric>
   </div>
 </template>