fix: simplify use-stateful (#4477)

epicmaxco · Feb 13, 2025 · 469fa61 · 469fa61
1 parent 53ffd2c
commit 469fa61
Show file tree

Hide file tree

Showing 32 changed files with 38 additions and 39 deletions.
diff --git a/packages/docs/page-config/ui-elements/dropdown/examples/PreventOverflow.vue b/packages/docs/page-config/ui-elements/dropdown/examples/PreventOverflow.vue
@@ -8,6 +8,7 @@
       <VaDropdown
         :model-value="true"
         :auto-placement="false"
+        :stateful="false"
         trigger="none"
         placement="top"
         teleport=".demo-viewport"

diff --git a/packages/ui/src/components/va-accordion/VaAccordion.vue b/packages/ui/src/components/va-accordion/VaAccordion.vue
@@ -26,7 +26,7 @@ const props = defineProps({
 
 const emit = defineEmits([...useStatefulEmits])
 
-const { valueComputed } = useStateful(props, emit, 'modelValue')
+const valueComputed = useStateful(props, emit, 'modelValue')
 
 const { items } = useAccordion(props, valueComputed)
 

diff --git a/packages/ui/src/components/va-alert/VaAlert.vue b/packages/ui/src/components/va-alert/VaAlert.vue
@@ -125,7 +125,7 @@ const {
   borderStyle,
 } = useAlertStyles(props)
 
-const { valueComputed } = useStateful(props, emit)
+const valueComputed = useStateful(props, emit)
 
 const hide = () => { valueComputed.value = false }
 

diff --git a/packages/ui/src/components/va-button-dropdown/VaButtonDropdown.vue b/packages/ui/src/components/va-button-dropdown/VaButtonDropdown.vue
@@ -142,7 +142,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', ...createEmits(), ...createMainButtonEmits()])
 
-const { valueComputed } = useStateful(props, emit)
+const valueComputed = useStateful(props, emit)
 
 const computedIcon = computed(() => valueComputed.value ? props.openedIcon : props.icon)
 

diff --git a/packages/ui/src/components/va-carousel/VaCarousel.vue b/packages/ui/src/components/va-carousel/VaCarousel.vue
@@ -168,7 +168,7 @@ const props = defineProps({
 
 const emit = defineEmits([...useStatefulEmits])
 
-const { valueComputed: currentSlide } = useStateful(props, emit, 'modelValue')
+const currentSlide = useStateful(props, emit, 'modelValue')
 const autoscrollIntervalComputed = useNumericProp('autoscrollInterval')
 const autoscrollPauseDurationComputed = useNumericProp('autoscrollPauseDuration')
 const ratioComputed = useNumericProp('ratio')

diff --git a/packages/ui/src/components/va-chip/VaChip.vue b/packages/ui/src/components/va-chip/VaChip.vue
@@ -107,7 +107,7 @@ const shadowStyle = computed(() => {
   return `0 0.125rem 0.19rem 0 ${getBoxShadowColor(colorComputed.value)}`
 })
 
-const { valueComputed } = useStateful(props, emit)
+const valueComputed = useStateful(props, emit)
 const { tagComputed, hrefComputed } = useRouterLink(props)
 
 const close = () => {

diff --git a/packages/ui/src/components/va-collapse/VaCollapse.vue b/packages/ui/src/components/va-collapse/VaCollapse.vue
@@ -120,7 +120,7 @@ const emit = defineEmits(['update:modelValue', ...useSelectableEmits])
 
 const body = shallowRef<HTMLElement>()
 
-const { valueComputed } = useStateful(props, emit, 'modelValue')
+const valueComputed = useStateful(props, emit, 'modelValue')
 
 const { getColor, getTextColor, setHSLAColor } = useColors()
 const { accordionProps, accordionItemValue } = useAccordionItem()

diff --git a/packages/ui/src/components/va-color-indicator/VaColorIndicator.vue b/packages/ui/src/components/va-color-indicator/VaColorIndicator.vue
@@ -42,7 +42,7 @@ const props = defineProps({
 
 const emit = defineEmits([...useStatefulEmits])
 
-const { valueComputed } = useStateful(props, emit)
+const valueComputed = useStateful(props, emit)
 const { getColor } = useColors()
 const hasKeyboardFocus = useElementFocusedKeyboard(useCurrentElement())
 

diff --git a/packages/ui/src/components/va-color-input/VaColorInput.vue b/packages/ui/src/components/va-color-input/VaColorInput.vue
@@ -70,7 +70,7 @@ const emit = defineEmits([...useStatefulEmits])
 
 const colorPicker = shallowRef<HTMLInputElement>()
 
-const { valueComputed } = useStateful(props, emit)
+const valueComputed = useStateful(props, emit)
 
 const callPickerDialog = () => !props.disabled && colorPicker.value?.click()
 

diff --git a/packages/ui/src/components/va-color-palette/VaColorPalette.vue b/packages/ui/src/components/va-color-palette/VaColorPalette.vue
@@ -46,7 +46,7 @@ const props = defineProps({
 
 const emit = defineEmits([...useStatefulEmits])
 
-const { valueComputed } = useStateful(props, emit)
+const valueComputed = useStateful(props, emit)
 
 const isSelected = (color: string) => valueComputed.value === color
 

diff --git a/packages/ui/src/components/va-counter/VaCounter.vue b/packages/ui/src/components/va-counter/VaCounter.vue
@@ -195,7 +195,7 @@ const {
   blur,
 } = useFocusableControl(input, props, emit)
 
-const { valueComputed: statefulValue } = useStateful(props, emit)
+const statefulValue = useStateful(props, emit)
 
 function floatify (num: number | string) {
   return parseFloat(Number(num).toFixed(10))

diff --git a/packages/ui/src/components/va-date-input/VaDateInput.vue b/packages/ui/src/components/va-date-input/VaDateInput.vue
@@ -183,7 +183,7 @@ watch([datePicker], () => {
   trapFocus()
 })
 
-const { valueComputed: statefulValue } = useStateful(props, emit)
+const statefulValue = useStateful(props, emit)
 const { isOpenSync, dropdownProps } = useDropdownableControl(props, emit, {
   defaultCloseOnValueUpdate: computed(() => {
     if (Array.isArray(valueComputed.value)) {

diff --git a/packages/ui/src/components/va-date-picker/VaDatePicker.vue b/packages/ui/src/components/va-date-picker/VaDatePicker.vue
@@ -122,7 +122,7 @@ const emit = defineEmits([
 
 const currentPicker = ref<typeof VaDayPicker | typeof VaMonthPicker | typeof VaYearPicker>()
 
-const { valueComputed } = useStateful(props, emit)
+const valueComputed = useStateful(props, emit)
 
 const { syncView } = useView(props, emit, { type: props.type })
 

diff --git a/packages/ui/src/components/va-dropdown/VaDropdown.vue b/packages/ui/src/components/va-dropdown/VaDropdown.vue
@@ -81,7 +81,7 @@ export default defineComponent({
   emits: [...useStatefulEmits, 'anchor-click', 'anchor-right-click', 'content-click', 'click-outside', 'focus-outside', 'close', 'open', 'anchor-dblclick'],
 
   setup (props, { emit }) {
-    const { valueComputed } = useStateful(props, emit, 'modelValue')
+    const valueComputed = useStateful(props, emit, 'modelValue')
 
     watch(valueComputed, (isOpened) => {
       if (isOpened) {

diff --git a/packages/ui/src/components/va-form-field/VaFormField.vue b/packages/ui/src/components/va-form-field/VaFormField.vue
@@ -52,7 +52,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<ValidationEmits & StatefulEmits<T>>()
 
-const { valueComputed } = useStateful(props, emit, 'modelValue')
+const valueComputed = useStateful(props, emit, 'modelValue')
 
 const reset = () => {
   valueComputed.value = (props.clearValue as any)

diff --git a/packages/ui/src/components/va-hover/VaHover.vue b/packages/ui/src/components/va-hover/VaHover.vue
@@ -24,7 +24,7 @@ const props = defineProps({
 
 const emit = defineEmits([...useStatefulEmits])
 
-const { valueComputed } = useStateful(props, emit)
+const valueComputed = useStateful(props, emit)
 
 const onMouseEnter = () => {
   if (!props.disabled) { valueComputed.value = true }

diff --git a/packages/ui/src/components/va-input/VaInput.vue b/packages/ui/src/components/va-input/VaInput.vue
@@ -136,7 +136,7 @@ useDeprecatedCondition([
 
 const input = shallowRef<HTMLInputElement>()
 
-const { valueComputed } = useStateful(props, emit, 'modelValue')
+const valueComputed = useStateful(props, emit, 'modelValue')
 
 const reset = () => withoutValidation(() => {
   valueComputed.value = props.clearValue

diff --git a/packages/ui/src/components/va-modal/VaModal.vue b/packages/ui/src/components/va-modal/VaModal.vue
@@ -252,7 +252,7 @@ const {
 
 const { getColor } = useColors()
 const textColorComputed = useElementTextColor(toRef(props, 'backgroundColor'))
-const { valueComputed } = useStateful(props, emit)
+const valueComputed = useStateful(props, emit)
 
 const computedClass = computed(() => ({
   'va-modal--fullscreen': props.fullscreen,

diff --git a/packages/ui/src/components/va-option-list/VaOptionList.vue b/packages/ui/src/components/va-option-list/VaOptionList.vue
@@ -93,7 +93,7 @@ const props = defineProps({
 
 const emit = defineEmits([...useStatefulEmits, ...useValidationEmits, 'clear'])
 
-const { valueComputed } = useStateful(props, emit, 'modelValue', { defaultValue: props.defaultValue })
+const valueComputed = useStateful(props, emit, 'modelValue', { defaultValue: props.defaultValue })
 
 const { getValue, getText, getTrackBy, getDisabled } = useSelectableList(props)
 

diff --git a/packages/ui/src/components/va-pagination/VaPagination.vue b/packages/ui/src/components/va-pagination/VaPagination.vue
@@ -177,7 +177,7 @@ const inputValue = ref('')
 
 const usesTotal = computed(() => !!((totalComputed.value || totalComputed.value === 0) && pageSizeComputed.value))
 
-const { valueComputed } = useStateful(props, emit)
+const valueComputed = useStateful(props, emit)
 
 const currentValue = computed({
   get: () => usesTotal.value ? Math.ceil(valueComputed.value / pageSizeComputed.value!) || 1 : valueComputed.value,

diff --git a/packages/ui/src/components/va-rating/hooks/useRating.ts b/packages/ui/src/components/va-rating/hooks/useRating.ts
@@ -28,7 +28,7 @@ export const useRatingProps = {
 export const useRating = (props: ExtractPropTypes<typeof useRatingProps> & ExtractPropTypes<typeof useFormFieldProps>, el: Ref<HTMLElement | undefined>) => {
   const { emit } = getContext()
   const isHovered = useElementHovered(el)
-  const { valueComputed: modelValue } = useStateful(props, emit)
+  const modelValue = useStateful(props, emit)
 
   const hoveredValue = ref(0)
   const visibleValue = computed(() => !props.disabled && !props.readonly && props.hover && isHovered.value ? hoveredValue.value : modelValue.value)

diff --git a/packages/ui/src/components/va-slider/VaSlider.vue b/packages/ui/src/components/va-slider/VaSlider.vue
@@ -246,7 +246,7 @@ const offset = ref(0)
 const size = ref(0)
 
 const defaultValue: number | number[] = props.range ? [0, 100] : 0
-const { valueComputed }: { valueComputed: WritableComputedRef<number | number[]> } = useStateful(props, emit, 'modelValue', { defaultValue })
+const valueComputed: WritableComputedRef<number | number[]> = useStateful(props, emit, 'modelValue', { defaultValue })
 
 const currentSliderDotIndex = ref(0)
 const hasMouseDown = ref(false)

diff --git a/packages/ui/src/components/va-split/VaSplit.vue b/packages/ui/src/components/va-split/VaSplit.vue
@@ -91,7 +91,7 @@ const emit = defineEmits([...useStatefulEmits])
 
 const splitPanelsContainer = shallowRef<HTMLElement>()
 
-const { valueComputed } = useStateful(props, emit)
+const valueComputed = useStateful(props, emit)
 
 const containerSize = ref()
 const bodyFontSize = ref(16)

diff --git a/packages/ui/src/components/va-stepper/VaStepper.vue b/packages/ui/src/components/va-stepper/VaStepper.vue
@@ -115,7 +115,7 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue', 'finish', 'update:steps'])
 
 const stepperNavigation = shallowRef<HTMLElement>()
-const { valueComputed: modelValue }: { valueComputed: Ref<number> } = useStateful(props, emit, 'modelValue')
+const modelValue: Ref<number> = useStateful(props, emit, 'modelValue')
 
 const stepsComputed = computed(() => {
   if (!props.finishStep) {

diff --git a/packages/ui/src/components/va-tabs/VaTabs.vue b/packages/ui/src/components/va-tabs/VaTabs.vue
@@ -136,7 +136,7 @@ const showPagination = ref(false)
 const tabsContentOffset = ref(0)
 const startingXPoint = ref(0)
 const animationIncluded = ref(false)
-const { valueComputed: tabSelected }: { valueComputed: WritableComputedRef<TabSelected> } = useStateful(props, emit)
+const tabSelected: WritableComputedRef<TabSelected> = useStateful(props, emit)
 
 const tabConfig = reactive({
   VaTab: {

diff --git a/packages/ui/src/components/va-textarea/VaTextarea.vue b/packages/ui/src/components/va-textarea/VaTextarea.vue
@@ -114,9 +114,7 @@ const emit = defineEmits([...createEmits(), ...useValidationEmits])
 const attrs = useAttrs()
 
 const textarea = shallowRef<HTMLTextAreaElement>()
-const { valueComputed } = useStateful(props, emit, 'modelValue', {
-  defaultValue: '',
-})
+const valueComputed = useStateful(props, emit, 'modelValue')
 
 const focus = () => {
   focusElement(textarea.value)

diff --git a/packages/ui/src/components/va-time-input/VaTimeInput.vue b/packages/ui/src/components/va-time-input/VaTimeInput.vue
@@ -144,7 +144,7 @@ const timePicker = shallowRef<typeof VaTimePicker>()
 const { isOpenSync, dropdownProps } = useDropdownableControl(props, emit, {
   defaultCloseOnValueUpdate: computed(() => Array.isArray(props.view) && props.view.length === 1),
 })
-const { valueComputed } = useStateful<Date>(props, emit)
+const valueComputed = useStateful<Date>(props, emit)
 
 const { parse, isValid } = useTimeParser(props)
 const { format } = useTimeFormatter(props)

diff --git a/packages/ui/src/components/va-time-picker/VaTimePicker.vue b/packages/ui/src/components/va-time-picker/VaTimePicker.vue
@@ -61,7 +61,7 @@ const props = defineProps({
 
 const emit = defineEmits([...useStatefulEmits])
 
-const { valueComputed } = useStateful(props, emit)
+const valueComputed = useStateful(props, emit)
 const { columns, isPM } = useTimePicker(props, valueComputed)
 const cellHeightComputed = useNumericProp('cellHeight') as ComputedRef<number>
 const visibleCellsCountComputed = useNumericProp('visibleCellsCount') as ComputedRef<number>

diff --git a/packages/ui/src/components/va-tree-view/hooks/useTreeView.ts b/packages/ui/src/components/va-tree-view/hooks/useTreeView.ts
@@ -49,8 +49,8 @@ const useTreeView: UseTreeViewFunc = (props, emit) => {
     getNodeProperty,
   } = useTreeHelpers(props)
   const { nodes, expandAll, filter, filterMethod, textBy } = toRefs(props)
-  const { valueComputed: expandedList } = useStateful(props, emit, 'expanded')
-  const { valueComputed: checkedList } = useStateful(props, emit, 'checked')
+  const expandedList = useStateful(props, emit, 'expanded')
+  const checkedList = useStateful(props, emit, 'checked')
 
   const selectedNode = ref()
   const selectedNodeComputed: WritableComputedRef<string | number | Record<string, unknown>> = computed({

diff --git a/packages/ui/src/composables/tests/useStateful.spec.ts b/packages/ui/src/composables/tests/useStateful.spec.ts
@@ -7,7 +7,7 @@ const TestComponentRich = defineComponent({
   template: '<p></p>',
   props: { ...useStatefulProps },
   setup (props, { emit }) {
-    const { valueComputed } = useStateful(props, emit)
+    const valueComputed = useStateful(props, emit)
 
     return {
       valueComputed,

diff --git a/packages/ui/src/composables/useSelectable.ts b/packages/ui/src/composables/useSelectable.ts
@@ -72,7 +72,7 @@ export const useSelectable = (
     unwrapEl(input.value)?.focus()
   }
 
-  const { valueComputed } = useStateful(props, emit)
+  const valueComputed = useStateful(props, emit)
 
   const {
     computedError,

diff --git a/packages/ui/src/composables/useStateful.ts b/packages/ui/src/composables/useStateful.ts
@@ -61,6 +61,7 @@ export const useStateful = <
 
   const defaultValuePassed = 'defaultValue' in options
 
+  // TODO: Prefer props[key] instead of defaultValue and remove defaultValue from options
   const valueState = ref(
     isUserProvidedProp.value
       ? props[key]
@@ -78,27 +79,26 @@ export const useStateful = <
     stateful ? watchModelValue() : unwatchModelValue?.()
   }, { immediate: true })
 
-  const valueComputed = computed({
+  const statefulValue = computed({
     get: () => {
-      if (isUserProvidedProp.value) { return props[key] }
       if (props.stateful) { return valueState.value }
 
       return props[key]
     },
     set: (value) => {
-      if (props.stateful && valueComputed.value !== value) { valueState.value = value }
+      if (props.stateful && statefulValue.value !== value) { valueState.value = value }
 
       emit(event, value)
     },
   }) as StatefulValue<P[Key]>
 
-  Object.defineProperty(valueComputed, 'stateful', {
+  Object.defineProperty(statefulValue, 'stateful', {
     get: () => props.stateful,
   })
 
-  Object.defineProperty(valueComputed, 'userProvided', {
+  Object.defineProperty(statefulValue, 'userProvided', {
     get: () => isUserProvidedProp.value,
   })
 
-  return { valueComputed }
+  return statefulValue
 }