refactor: replaced custom useManagedProp with builtin defineModel

Author: mtorromeo

apps/docs/src/stories/Components/Tooltip.story.vue

@@ -116,7 +116,7 @@ onMounted(() => {
   }
 });
 
-function checkTrigger(value: string, checked: boolean) {
+function checkTrigger(value: string, checked: boolean | null) {
   if (checked) {
     trigger.push(value);
   } else {

packages/core/src/components/Accordion/AccordionItem.vue

@@ -5,10 +5,10 @@
       type="button"
       :class="[
         styles.accordionToggle, {
-          [styles.modifiers.expanded]: managedExpanded,
+          [styles.modifiers.expanded]: expanded,
         },
       ]"
-      :aria-expanded="managedExpanded"
+      :aria-expanded="expanded"
       @click="handleClick($event as PointerEvent)"
     >
       <span v-if="accordion?.togglePosition === 'start'" :class="styles.accordionToggleIcon">
@@ -29,10 +29,10 @@
     :class="[
       styles.accordionExpandableContent, {
         [styles.modifiers.fixed]: fixed,
-        [styles.modifiers.expanded]: managedExpanded,
+        [styles.modifiers.expanded]: expanded,
       },
     ]"
-    :hidden="!managedExpanded"
+    :hidden="!expanded"
   >
     <div :class="styles.accordionExpandableContentBody">
       <slot />
@@ -44,7 +44,6 @@
 import { inject, type ButtonHTMLAttributes } from 'vue';
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 import AngleRightIcon from '@vue-patternfly/icons/angle-right-icon';
-import { useManagedProp } from '../../use';
 import { AccordionKey } from './Accordion.vue';
 import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
 
@@ -58,16 +57,14 @@ export interface Props extends OUIAProps, /* @vue-ignore */ Omit<ButtonHTMLAttri
   toggleComponent?: string;
   contentComponent?: string;
   fixed?: boolean;
-  expanded?: boolean;
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  expanded: undefined,
-});
+const props = defineProps<Props>();
 const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
 
+const expanded = defineModel<boolean>('expanded', { default: false });
+
 const emit = defineEmits<{
-  (name: 'update:expanded', value: boolean): void;
   (name: 'click', event: PointerEvent): void;
 }>();
 
@@ -77,10 +74,9 @@ defineSlots<{
 }>();
 
 const accordion = inject(AccordionKey, undefined);
-const managedExpanded = useManagedProp('expanded', false);
 
 function handleClick(event: PointerEvent) {
-  managedExpanded.value = !managedExpanded.value;
+  expanded.value = !expanded.value;
   emit('click', event);
 }
 </script>

packages/core/src/components/Alert/Alert.vue

@@ -9,7 +9,7 @@
         [styles.modifiers.inline]: inline,
         [styles.modifiers.plain]: plain,
         [styles.modifiers.expandable]: expandable,
-        [styles.modifiers.expanded]: managedExpanded,
+        [styles.modifiers.expanded]: expanded,
       }
     ]"
     :aria-live="liveRegion ? 'polite' : undefined"
@@ -20,9 +20,9 @@
     <div v-if="expandable" :class="styles.alertToggle">
       <pf-button
         variant="plain"
-        :aria-expanded="managedExpanded"
+        :aria-expanded="expanded"
         :aria-label="toggleAriaLabel || `Toggle ${variantLabel} ${title}`"
-        @click="managedExpanded = !managedExpanded"
+        @click="expanded = !expanded"
       >
         <span :class="styles.alertToggleIcon">
           <pf-angle-right-icon aria-hidden />
@@ -79,7 +79,6 @@ import PfAngleRightIcon from '@vue-patternfly/icons/angle-right-icon';
 import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
 import { ref, watch, type HTMLAttributes, onBeforeUnmount, onMounted, computed, type Component, useTemplateRef, type ComponentPublicInstance } from 'vue';
 import { useElementSize } from '@vueuse/core';
-import { useManagedProp } from '../../use';
 import type { Placement } from '../../helpers/FloatingUi.vue';
 
 defineOptions({
@@ -93,8 +92,6 @@ export interface Props extends OUIAProps, /* @vue-ignore */ Omit<HTMLAttributes,
   id?: string;
   /** Flag indicating that the alert is expandable. */
   expandable?: boolean;
-  /** Flag indicating that the alert is expanded */
-  expanded?: boolean;
   /** Show close button */
   onClose?: (e: Event) => void;
   /** Flag to indicate if the alert is inline. */
@@ -128,7 +125,6 @@ export interface Props extends OUIAProps, /* @vue-ignore */ Omit<HTMLAttributes,
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  expanded: undefined,
   variant: 'custom',
   truncateTitle: 0,
   timeoutAnimation: 3000,
@@ -137,6 +133,9 @@ const props = withDefaults(defineProps<Props>(), {
 });
 const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe, variant: props.variant});
 
+/** Flag indicating that the alert is expanded */
+const expanded = defineModel<boolean>('expanded', { default: false });
+
 const emit = defineEmits<{
   (name: 'mouseenter', e: Event): void;
   (name: 'mouseleave', e: Event): void;
@@ -160,7 +159,6 @@ const timedOutAnimation = ref(true);
 const containsFocus = ref(false);
 const el = useTemplateRef('elRef');
 
-const managedExpanded = useManagedProp('expanded', false);
 const variantLabel = computed(() => `${props.variant.charAt(0).toUpperCase()}${props.variant.slice(1)} alert:`);
 const dismissed = computed(() => timedOut.value && timedOutAnimation.value && !isMouseOver.value && !containsFocus.value);
 

packages/core/src/components/Card/Card.vue

@@ -4,7 +4,7 @@
     class="pf-v5-screen-reader"
     type="checkbox"
     :name="name"
-    :checked="managedSelected"
+    :checked="selected"
     :disabled="selectableDisabled"
     tabindex="-1"
     @change="emit('change', $event)"
@@ -14,7 +14,7 @@
     v-bind="{...ouiaProps, ...$attrs}"
     :class="[styles.card, ...selectableModifiers, {
       [styles.modifiers.compact]: compact,
-      [styles.modifiers.expanded]: managedExpanded,
+      [styles.modifiers.expanded]: expanded,
       [styles.modifiers.flat]: flat,
       [styles.modifiers.rounded]: rounded,
       [styles.modifiers.displayLg]: large && !compact,
@@ -29,7 +29,7 @@
 </template>
 
 <script lang="ts">
-export const CardExpandedKey = Symbol('CardExpandedKey') as InjectionKey<Ref<boolean>>;
+export const CardExpandedKey = Symbol('CardExpandedKey') as InjectionKey<Ref<boolean | undefined>>;
 export const CardExpandableKey = Symbol('CardExpandableKey') as InjectionKey<ComputedRef<boolean>>;
 
 export interface Props extends OUIAProps, /* @vue-ignore */ Omit<HTMLAttributes, 'tabindex'> {
@@ -54,9 +54,6 @@ export interface Props extends OUIAProps, /* @vue-ignore */ Omit<HTMLAttributes,
   /** Name of the optional hidden input that tracks the selected status */
   name?: string;
 
-  /** Modifies the card to include selected styling */
-  selected?: boolean,
-
   /** Modifies the card to include flat styling */
   flat?: boolean;
 
@@ -74,16 +71,12 @@ export interface Props extends OUIAProps, /* @vue-ignore */ Omit<HTMLAttributes,
 
   /** Modifies the card to be expandable */
   expandable?: boolean;
-
-  /** Flag indicating if a card is expanded. Modifies the card to be expandable. */
-  expanded?: boolean;
 }
 </script>
 
 <script lang="ts" setup>
 import styles from '@patternfly/react-styles/css/components/Card/card';
-import { provide, computed, type Component, type InjectionKey, type Ref, type ComputedRef, type HTMLAttributes } from 'vue';
-import { useManagedProp } from '../../use';
+import { provide, computed, type Component, type InjectionKey, type ComputedRef, type HTMLAttributes, type Ref } from 'vue';
 import { isDefined } from '@vueuse/shared';
 import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
 
@@ -99,11 +92,15 @@ const props = withDefaults(defineProps<Props>(), {
 });
 const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
 
+/** Flag indicating if a card is expanded. Modifies the card to be expandable. */
+const expanded = defineModel<boolean>('expanded');
+
+/** Modifies the card to include selected styling */
+const selected = defineModel<boolean>('selected', { default: false });
+
 const emit = defineEmits<{
   (name: 'click', e: PointerEvent): void;
   (name: 'change', e: Event): void;
-  (name: 'update:expanded', value: boolean): void;
-  (name: 'update:selected', value: boolean): void;
 }>();
 
 defineSlots<{
@@ -112,26 +109,24 @@ defineSlots<{
   badge?: (props?: Record<never, never>) => any;
 }>();
 
-const managedExpanded = useManagedProp('expanded', false);
-const managedSelected = useManagedProp('selected', false);
-provide(CardExpandedKey, managedExpanded);
-provide(CardExpandableKey, computed(() => props.expandable || isDefined(props.expanded)));
+provide(CardExpandedKey, expanded);
+provide(CardExpandableKey, computed(() => props.expandable || isDefined(expanded.value)));
 
 const selectableModifiers = computed(() => {
   if (props.selectableDisabled) {
     return [styles.modifiers.nonSelectableRaised];
   }
   if (props.selectableRaised) {
-    return [styles.modifiers.selectableRaised, managedSelected.value && styles.modifiers.selectedRaised];
+    return [styles.modifiers.selectableRaised, selected.value && styles.modifiers.selectedRaised];
   }
   if (props.selectable) {
-    return [styles.modifiers.selectable, managedSelected.value && styles.modifiers.selected];
+    return [styles.modifiers.selectable, selected.value && styles.modifiers.selected];
   }
   return [];
 });
 
 function onClick(e: PointerEvent)  {
-  managedSelected.value = !managedSelected.value;
+  selected.value = !selected.value;
   emit('click', e);
 }
 </script>

packages/core/src/components/Checkbox.vue

@@ -60,8 +60,6 @@ defineOptions({
 
 export interface Props extends OUIAProps, /* @vue-ignore */ Omit<InputHTMLAttributes, 'onChange' | 'type' | 'checked'> {
   component?: string | Component;
-  /** Flag to show if the checkbox is checked. */
-  modelValue?: boolean | null;
   /** Flag to show if the checkbox is disabled. */
   disabled?: boolean;
   /** Flag to show if the checkbox is required. */
@@ -85,9 +83,11 @@ const props = withDefaults(defineProps<Props>(), {
 });
 const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
 
+/** Flag to show if the checkbox is checked. */
+const value = defineModel<boolean | null>({ default: false });
+
 const emit = defineEmits<{
   (name: 'change', e: Event): void;
-  (name: 'update:modelValue', value: boolean): void;
 }>();
 
 defineSlots<{
@@ -99,20 +99,19 @@ defineSlots<{
 useChildrenTracker(FormInputsKey, getCurrentInstance()?.proxy);
 const input = useTemplateRef('inputRef');
 const wrapWithLabel = computed(() => (props.labelWrapped && !props.component) || props.component === 'label');
-const validId = computed(() => props.id || getUniqueId());
 
-watch(() => props.modelValue, () => {
+watch(value, () => {
   if (!input.value) {
     return;
   }
-  input.value.indeterminate = props.modelValue === null;
+  input.value.indeterminate = value.value === null;
 }, {
   immediate: true,
 });
 
 function onChange(e: Event) {
   emit('change', e);
-  emit('update:modelValue', (e.currentTarget as HTMLInputElement).checked);
+  value.value = (e.currentTarget as HTMLInputElement).checked;
 }
 
 defineExpose({

packages/core/src/components/DataList/DataList.vue

@@ -1,6 +1,6 @@
 <template>
   <ul
-    v-bind="(ouiaProps as any)"
+    v-bind="ouiaProps"
     :class="[
       styles.dataList,
       gridBreackpointClass, {
@@ -16,20 +16,18 @@
 
 <script lang="ts">
 export const DataListKey = Symbol('DataListSelectableKey') as InjectionKey<{
-  emit: (event: 'update:selected', ...args: any[]) => void;
+  emit: (event: 'update:selected', item: string | number | symbol | (string | number | symbol)[] | undefined) => void;
   selectable: Ref<boolean>,
   expandable: ComputedRef<boolean | undefined>,
   inputName: ComputedRef<string | undefined>,
   inputValue: ComputedRef<string | undefined>,
-  itemSelection: WritableComputedRef<any>,
+  itemSelection: Ref<string | number | symbol | (string | number | symbol)[] | undefined>,
   multipleSelection: ComputedRef<boolean>,
 }>;
 
 export type DataListWrapModifier = 'nowrap' | 'truncate' | 'breakWord';
 
 export interface Props extends OUIAProps, /* @vue-ignore */ HTMLAttributes {
-    /** Array for multiple selection, single value for single selection, undefined to disable selection */
-  selected?: string | number | symbol | (string | number | symbol)[];
   /** Name of the item input (radio or checkbox) when item selection is enabled */
   selectionInputName?: string;
   /** Defines the value for the input (radio or checkbox) */
@@ -53,8 +51,7 @@ export interface Props extends OUIAProps, /* @vue-ignore */ HTMLAttributes {
 import styles from '@patternfly/react-styles/css/components/DataList/data-list';
 import stylesGrid from '@patternfly/react-styles/css/components/DataList/data-list-grid';
 import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
-import { computed, type ComputedRef, type InjectionKey, provide, type Ref, ref, type WritableComputedRef, type HTMLAttributes } from "vue";
-import { useManagedProp } from '../../use';
+import { computed, type ComputedRef, type InjectionKey, provide, type Ref, ref, type HTMLAttributes } from "vue";
 
 const gridBreakpointClasses = {
   none: stylesGrid.modifiers.gridNone,
@@ -72,30 +69,28 @@ defineOptions({
 
 const props = withDefaults(defineProps<Props>(), {
   gridBreakpoint: 'md',
-  selected: undefined,
   expandable: undefined,
 });
 const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
 
-const emit = defineEmits<{
-  (name: 'update:selected', s: any): void;
-}>();
+const emit = defineEmits();
 
 defineSlots<{
   default?: (props?: Record<never, never>) => any;
 }>();
 
-const managedSelected = useManagedProp('selected', null);
+/** Array for multiple selection, single value for single selection, undefined to disable selection */
+const selected = defineModel<string | number | symbol | (string | number | symbol)[]>('selected');
 
-const selectable = computed(() => !!props['onUpdate:selected'] || props.selected !== undefined || !!props.selectionInputName);
+const selectable = computed(() => !!props['onUpdate:selected'] || selected.value !== undefined || !!props.selectionInputName);
 
 provide(DataListKey, {
   emit,
   selectable,
   expandable: computed(() => props.expandable),
   inputName: computed(() => props.selectionInputName),
   inputValue: computed(() => props.selectionInputValue),
-  itemSelection: managedSelected,
+  itemSelection: selected,
   multipleSelection: computed(() => props.selectionMultiple),
 });