From e2eaf85cffa325deead836d75eb3e66efb52fce3 Mon Sep 17 00:00:00 2001 From: Danila Poyarkov Date: Fri, 15 May 2026 11:57:38 +0300 Subject: [PATCH] chore(vue): enable stricter prop linting --- oxlint.json | 3 ++ src/components/ColorPickerPanel/HsbFields.vue | 10 ++---- src/components/ColorPickerPanel/HslFields.vue | 10 ++---- .../ColorPickerPanel/OkhclFields.vue | 23 +++--------- src/components/PickerSlider.vue | 35 +++++++++---------- 5 files changed, 28 insertions(+), 53 deletions(-) diff --git a/oxlint.json b/oxlint.json index 24b0946ae..57c09f838 100644 --- a/oxlint.json +++ b/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", diff --git a/src/components/ColorPickerPanel/HsbFields.vue b/src/components/ColorPickerPanel/HsbFields.vue index 5f8212c4d..3e2af8d8e 100644 --- a/src/components/ColorPickerPanel/HsbFields.vue +++ b/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" diff --git a/src/components/ColorPickerPanel/HslFields.vue b/src/components/ColorPickerPanel/HslFields.vue index ecf672589..021b45fd7 100644 --- a/src/components/ColorPickerPanel/HslFields.vue +++ 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" diff --git a/src/components/ColorPickerPanel/OkhclFields.vue b/src/components/ColorPickerPanel/OkhclFields.vue index 64a1ed64f..a8e55f882 100644 --- a/src/components/ColorPickerPanel/OkhclFields.vue +++ b/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)" diff --git a/src/components/PickerSlider.vue b/src/components/PickerSlider.vue index 6d1fa82bc..71aa053dd 100644 --- a/src/components/PickerSlider.vue +++ b/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 {