@cfasim-ui/docs 0.3.17 → 0.3.18

package/components/NumberInput/NumberInput.md

@@ -16,6 +16,12 @@ const ageRange = ref([18, 65])
 const coverageRange = ref([0.2, 0.8])
 const minAge = ref(18)
 const maxAge = ref(65)
+const dayMs = 24 * 60 * 60 * 1000
+const dateStart = Date.UTC(2024, 0, 1)
+const dateEnd = Date.UTC(2024, 11, 31)
+const dateRange = ref([Date.UTC(2024, 2, 1), Date.UTC(2024, 8, 30)])
+const formatDate = (ms) =>
+  new Date(ms).toLocaleDateString("en-US", { month: "short", day: "numeric" })
 </script>
 
 <ComponentDemo>
@@ -226,6 +232,51 @@ Range mode works with `percent` and `live` as well:
   </template>
 </ComponentDemo>
 
+### Custom slider display
+
+Pass `slider-display` (a `(value: number) => string` function) to format the
+thumb labels and the min/max labels however you like. The internal model is
+still a number — only the displayed text changes. This applies to single
+sliders and ranges; the regular text input is unaffected.
+
+<ComponentDemo>
+  <div style="width: 300px">
+    <NumberInput
+      v-model:range="dateRange"
+      label="Date range"
+      :min="dateStart"
+      :max="dateEnd"
+      :step="dayMs"
+      :slider-display="formatDate"
+    />
+  </div>
+
+<template #code>
+
+```vue
+<script setup>
+import { ref } from "vue";
+const dayMs = 24 * 60 * 60 * 1000;
+const dateStart = Date.UTC(2024, 0, 1);
+const dateEnd = Date.UTC(2024, 11, 31);
+const dateRange = ref([Date.UTC(2024, 2, 1), Date.UTC(2024, 8, 30)]);
+const formatDate = (ms) =>
+  new Date(ms).toLocaleDateString("en-US", { month: "short", day: "numeric" });
+</script>
+
+<NumberInput
+  v-model:range="dateRange"
+  label="Date range"
+  :min="dateStart"
+  :max="dateEnd"
+  :step="dayMs"
+  :slider-display="formatDate"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
 ### Live slider
 
 With `live`, the model updates while dragging the slider thumb rather than only on release.
@@ -415,4 +466,5 @@ the input visually.
 | `numberType` | `"integer" \| "float"` | No | — |
 | `required` | `boolean` | No | — |
 | `decimals` | `number` | No | — |
+| `sliderDisplay` | `(value: number) =&gt; string` | No | — |
 

package/components/NumberInput/NumberInput.vue

@@ -29,6 +29,10 @@ const props = defineProps<{
   numberType?: "integer" | "float";
   required?: boolean;
   decimals?: number;
+  // Custom formatter for slider thumb labels and min/max labels. Overrides
+  // the default percent/decimal formatting when provided. Only consulted in
+  // slider/range mode — the text input keeps its own number-shaped formatting.
+  sliderDisplay?: (value: number) => string;
 }>();
 
 function isRangeValue(v: unknown): v is NumberRange {
@@ -109,6 +113,7 @@ function roundToDecimals(v: number, d: number): number {
 
 function formatSliderValue(v: number | undefined) {
   if (v == null) return "";
+  if (props.sliderDisplay) return props.sliderDisplay(v);
   const d = displayDecimals.value;
   if (props.percent) return (v * 100).toFixed(d) + "%";
   return v.toLocaleString("en-US", {

package/index.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.17",
+  "version": "0.3.18",
   "package": "@cfasim-ui/docs",
   "content": {
     "components": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfasim-ui/docs",
-  "version": "0.3.17",
+  "version": "0.3.18",
   "description": "LLM-friendly component and chart documentation for cfasim-ui",
   "license": "Apache-2.0",
   "repository": {