feat(desc): add lead/trail nit option to <SDescNumber> (#461) (#463)

close #461

lib/components/SDescNumber.vue

@@ -6,6 +6,8 @@ import SDescEmpty from './SDescEmpty.vue'
 
 const props = defineProps<{
   value?: number | null
+  leadUnit?: string
+  trailUnit?: string
   separator?: boolean
 }>()
 
@@ -26,21 +28,45 @@ const _value = computed(() => {
 
 <template>
   <div v-if="_value" class="SDescNumber">
+    <div v-if="leadUnit" class="lead-unit">
+      {{ leadUnit }}
+    </div>
     <div class="value">
       {{ _value }}
     </div>
+    <div v-if="trailUnit" class="trail-unit">
+      {{ trailUnit }}
+    </div>
   </div>
   <SDescEmpty v-else />
 </template>
 
 <style scoped lang="postcss">
-.value {
+.SDescNumber {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.value,
+.lead-unit,
+.trail-unit {
   line-height: 24px;
   font-size: 14px;
   font-weight: 400;
+}
+
+.value {
+  flex-grow: 1;
   font-feature-settings: "tnum";
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.lead-unit,
+.trail-unit {
+  flex-shrink: 0;
+  color: var(--c-text-2);
+}
 </style>