chore(vue): enable stricter prop linting

oxlint.json

@@ -95,7 +95,10 @@
     "vue/no-required-prop-with-default": "error",
     "vue/no-multiple-slot-args": "error",
     "vue/define-emits-declaration": "error",
+    "vue/define-props-declaration": "error",
     "vue/define-props-destructuring": "error",
+    "vue/max-props": ["error", { "maxProps": 16 }],
+    "vue/require-default-export": "error",
     "vue/require-typed-ref": "error",
     "open-pencil/no-inline-named-types": [
       "error",

src/components/ColorPickerPanel/HsbFields.vue

@@ -44,10 +44,7 @@ const ctx = useColorPickerPanelContext()
     :min="0"
     :max="100"
     :step="0.1"
-    :display-value="Math.round(ctx.hsbColor.s)"
-    :display-min="0"
-    :display-max="100"
-    :display-step="1"
+    :display="{ value: Math.round(ctx.hsbColor.s), min: 0, max: 100, step: 1 }"
     :gradient-style="ctx.sliderGradient.hsbSaturation"
     :thumb-fill="colorToCSS(ctx.sliderPreview.hsbSaturation)"
     test-id="color-slider-hsb-s"
@@ -60,10 +57,7 @@ const ctx = useColorPickerPanelContext()
     :min="0"
     :max="100"
     :step="0.1"
-    :display-value="Math.round(ctx.hsbColor.b)"
-    :display-min="0"
-    :display-max="100"
-    :display-step="1"
+    :display="{ value: Math.round(ctx.hsbColor.b), min: 0, max: 100, step: 1 }"
     :gradient-style="ctx.sliderGradient.hsbBrightness"
     :thumb-fill="colorToCSS(ctx.sliderPreview.hsbBrightness)"
     test-id="color-slider-hsb-b"

src/components/ColorPickerPanel/HslFields.vue

@@ -44,10 +44,7 @@ const ctx = useColorPickerPanelContext()
     :min="0"
     :max="100"
     :step="0.1"
-    :display-value="Math.round(ctx.hslColor.s ?? 0)"
-    :display-min="0"
-    :display-max="100"
-    :display-step="1"
+    :display="{ value: Math.round(ctx.hslColor.s ?? 0), min: 0, max: 100, step: 1 }"
     :gradient-style="ctx.sliderGradient.hslSaturation"
     :thumb-fill="colorToCSS(ctx.sliderPreview.hslSaturation)"
     test-id="color-slider-hsl-s"
@@ -60,10 +57,7 @@ const ctx = useColorPickerPanelContext()
     :min="0"
     :max="100"
     :step="0.1"
-    :display-value="Math.round(ctx.hslColor.l ?? 0)"
-    :display-min="0"
-    :display-max="100"
-    :display-step="1"
+    :display="{ value: Math.round(ctx.hslColor.l ?? 0), min: 0, max: 100, step: 1 }"
     :gradient-style="ctx.sliderGradient.hslLightness"
     :thumb-fill="colorToCSS(ctx.sliderPreview.hslLightness)"
     test-id="color-slider-hsl-l"

src/components/ColorPickerPanel/OkhclFields.vue

@@ -16,10 +16,7 @@ const ctx = useColorPickerPanelContext()
       :min="0"
       :max="360"
       :step="1"
-      :display-value="Math.round(ctx.okhcl.okhcl.h)"
-      :display-min="0"
-      :display-max="360"
-      :display-step="1"
+      :display="{ value: Math.round(ctx.okhcl.okhcl.h), min: 0, max: 360, step: 1 }"
       gradient-style="background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);"
       :thumb-fill="colorToCSS(ctx.okhclSliderPreview?.okhclHue ?? ctx.color)"
       test-id="color-slider-okhcl-h"
@@ -32,11 +29,7 @@ const ctx = useColorPickerPanelContext()
       :min="0"
       :max="0.4"
       :step="0.001"
-      :display-value="toPercent(ctx.okhcl.okhcl.c)"
-      :display-min="0"
-      :display-max="40"
-      :display-step="1"
-      :parse-display="fromPercent"
+      :display="{ value: toPercent(ctx.okhcl.okhcl.c), min: 0, max: 40, step: 1, parse: fromPercent }"
       :gradient-style="ctx.okhclSliderGradient?.okhclChroma ?? undefined"
       :thumb-fill="colorToCSS(ctx.okhclSliderPreview?.okhclChroma ?? ctx.color)"
       test-id="color-slider-okhcl-c"
@@ -49,11 +42,7 @@ const ctx = useColorPickerPanelContext()
       :min="0"
       :max="1"
       :step="0.001"
-      :display-value="toPercent(ctx.okhcl.okhcl.l)"
-      :display-min="0"
-      :display-max="100"
-      :display-step="1"
-      :parse-display="fromPercent"
+      :display="{ value: toPercent(ctx.okhcl.okhcl.l), min: 0, max: 100, step: 1, parse: fromPercent }"
       :gradient-style="ctx.okhclSliderGradient?.okhclLightness ?? undefined"
       :thumb-fill="colorToCSS(ctx.okhclSliderPreview?.okhclLightness ?? ctx.color)"
       test-id="color-slider-okhcl-l"
@@ -66,11 +55,7 @@ const ctx = useColorPickerPanelContext()
       :min="0"
       :max="1"
       :step="0.001"
-      :display-value="toPercent(ctx.okhcl.okhcl.a ?? 1)"
-      :display-min="0"
-      :display-max="100"
-      :display-step="1"
-      :parse-display="fromPercent"
+      :display="{ value: toPercent(ctx.okhcl.okhcl.a ?? 1), min: 0, max: 100, step: 1, parse: fromPercent }"
       checkerboard
       :gradient-style="`background: linear-gradient(to right, transparent, ${colorToCSS(ctx.color)})`"
       :thumb-fill="colorToCSS(ctx.color)"

src/components/PickerSlider.vue

@@ -2,18 +2,22 @@
 import { inputNumberValue } from '@open-pencil/vue'
 import { usePickerSliderUI } from './ui/picker-slider'
 
+type PickerSliderDisplay = {
+  value?: number
+  min?: number
+  max?: number
+  step?: number
+  format?: (value: number) => string | number
+  parse?: (value: number) => number
+}
+
 const {
   label,
   modelValue,
   min,
   max,
   step = 1,
-  displayValue,
-  displayMin,
-  displayMax,
-  displayStep,
-  formatDisplay,
-  parseDisplay,
+  display,
   gradientStyle,
   checkerboard = false,
   thumbFill = '#fff',
@@ -25,12 +29,7 @@ const {
   min: number
   max: number
   step?: number
-  displayValue?: number
-  displayMin?: number
-  displayMax?: number
-  displayStep?: number
-  formatDisplay?: (value: number) => string | number
-  parseDisplay?: (value: number) => number
+  display?: PickerSliderDisplay
   gradientStyle?: string
   checkerboard?: boolean
   thumbFill?: string
@@ -47,12 +46,12 @@ const emit = defineEmits<{
 const cls = usePickerSliderUI({ checkerboard, ui })
 
 function numberValue(): string | number {
-  const value = displayValue ?? modelValue
-  return formatDisplay ? formatDisplay(value) : value
+  const value = display?.value ?? modelValue
+  return display?.format ? display.format(value) : value
 }
 
 function handleNumberChange(value: number) {
-  emit('update:modelValue', parseDisplay ? parseDisplay(value) : value)
+  emit('update:modelValue', display?.parse ? display.parse(value) : value)
 }
 
 function thumbLeft(): string {
@@ -82,9 +81,9 @@ function thumbLeft(): string {
     <input
       type="number"
       :class="cls.input"
-      :min="displayMin ?? min"
-      :max="displayMax ?? max"
-      :step="displayStep ?? step"
+      :min="display?.min ?? min"
+      :max="display?.max ?? max"
+      :step="display?.step ?? step"
       :value="numberValue()"
       @change="handleNumberChange(inputNumberValue($event))"
     />