Skip to content

Commit d838cfc

Browse files
mtorromeomtorromeo
committed
fix: imported fixes from v5
1 parent f542684 commit d838cfc

File tree

6 files changed

+171
-144
lines changed

6 files changed

+171
-144
lines changed

‎packages/core/src/components/Checkbox.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ const value = defineModel<boolean | null>({ default: false });
8888
8989
const emit = defineEmits<{
9090
(name: 'change', e: Event): void;
91+
(name: 'update:modelValue', value: boolean): void;
9192
}>();
9293
9394
defineSlots<{

‎packages/core/src/components/Label/LabelGroup.vue‎

Lines changed: 106 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -46,111 +46,111 @@
4646
</div>
4747
</template>
4848

49-
<script lang="ts" setup>
50-
import { h, ref, useTemplateRef, type HTMLAttributes } from 'vue';
51-
import styles from '@patternfly/react-styles/css/components/Label/label-group';
52-
import labelStyles from '@patternfly/react-styles/css/components/Label/label';
53-
import CircleXmarkIcon from '@vue-patternfly/icons/circle-xmark-icon';
54-
import PfLabel from './Label.vue';
55-
import PfButton from '../Button.vue';
56-
import PfTooltip from '../Tooltip/Tooltip.vue';
57-
import { findChildrenVNodes, fillTemplate } from '../../util';
58-
import { useElementOverflow } from '../../use';
59-
import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
60-
import type { Placement } from '../../helpers/FloatingUi.vue';
61-
62-
defineOptions({
63-
name: 'PfLabelGroup',
64-
});
65-
66-
interface Props extends OUIAProps, /* @vue-ignore */ Omit<HTMLAttributes, 'onClick'> {
67-
id?: string;
68-
/** Flag for having the label group default to expanded */
69-
defaultOpen?: boolean;
70-
/** Flag if label group can be closed */
71-
closable?: boolean;
72-
/** Flag indicating the labels in the group are compact */
73-
compact?: boolean;
74-
/** Flag to implement a vertical layout */
75-
vertical?: boolean;
76-
/** Flag indicating contained labels are editable. Allows spacing for a text input after the labels. */
77-
editable?: boolean;
78-
/** Flag indicating the editable label group should be appended with a textarea. */
79-
editableTextarea?: boolean;
80-
/** Additional props passed to the editable textarea. */
81-
editableTextareaProps?: any;
82-
/** Category name text for the label group category. If this prop is supplied the label group with have a label and category styling applied */
83-
category?: string;
84-
/** Set number of labels to show before overflow */
85-
numLabels?: number;
86-
/** Position of the tooltip which is displayed if the category name text is longer */
87-
tooltipPosition?: Placement;
88-
/** Aria label for close button */
89-
closeBtnAriaLabel?: string;
90-
/** Aria label for label group that does not have a category name */
91-
ariaLabel?: string;
92-
/** Customizable "Show Less" text string */
93-
expandedText?: string;
94-
/** Customizable template string. Use variable "${remaining}" for the overflow label count. */
95-
collapsedText?: string;
49+
<script lang="ts" setup>
50+
import { h, ref, useTemplateRef, type HTMLAttributes } from 'vue';
51+
import styles from '@patternfly/react-styles/css/components/Label/label-group';
52+
import labelStyles from '@patternfly/react-styles/css/components/Label/label';
53+
import CircleXmarkIcon from '@vue-patternfly/icons/circle-xmark-icon';
54+
import PfLabel from './Label.vue';
55+
import PfButton from '../Button.vue';
56+
import PfTooltip from '../Tooltip/Tooltip.vue';
57+
import { findChildrenVNodes, fillTemplate } from '../../util';
58+
import { useElementOverflow } from '../../use';
59+
import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
60+
import type { Placement } from '../../helpers/FloatingUi.vue';
61+
62+
defineOptions({
63+
name: 'PfLabelGroup',
64+
});
65+
66+
interface Props extends OUIAProps, /* @vue-ignore */ Omit<HTMLAttributes, 'onClick'> {
67+
id?: string;
68+
/** Flag for having the label group default to expanded */
69+
defaultOpen?: boolean;
70+
/** Flag if label group can be closed */
71+
closable?: boolean;
72+
/** Flag indicating the labels in the group are compact */
73+
compact?: boolean;
74+
/** Flag to implement a vertical layout */
75+
vertical?: boolean;
76+
/** Flag indicating contained labels are editable. Allows spacing for a text input after the labels. */
77+
editable?: boolean;
78+
/** Flag indicating the editable label group should be appended with a textarea. */
79+
editableTextarea?: boolean;
80+
/** Additional props passed to the editable textarea. */
81+
editableTextareaProps?: any;
82+
/** Category name text for the label group category. If this prop is supplied the label group with have a label and category styling applied */
83+
category?: string;
84+
/** Set number of labels to show before overflow */
85+
numLabels?: number;
86+
/** Position of the tooltip which is displayed if the category name text is longer */
87+
tooltipPosition?: Placement;
88+
/** Aria label for close button */
89+
closeBtnAriaLabel?: string;
90+
/** Aria label for label group that does not have a category name */
91+
ariaLabel?: string;
92+
/** Customizable "Show Less" text string */
93+
expandedText?: string;
94+
/** Customizable template string. Use variable "${remaining}" for the overflow label count. */
95+
collapsedText?: string;
96+
}
97+
98+
const props = withDefaults(defineProps<Props>(), {
99+
numLabels: 3,
100+
tooltipPosition: 'top',
101+
closeBtnAriaLabel: 'Close chip group',
102+
ariaLabel: 'Chip group category',
103+
expandedText: 'Show Less',
104+
collapsedText: '${remaining} more',
105+
});
106+
const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
107+
108+
const emit = defineEmits<{
109+
(name: 'click', e: PointerEvent): void;
110+
(name: 'overflowChipClick', e: PointerEvent): void;
111+
}>();
112+
113+
const slots = defineSlots<{
114+
default?: (props?: Record<never, never>) => any;
115+
'add-label-control'?: (props?: Record<never, never>) => any;
116+
}>();
117+
118+
const label = useTemplateRef('labelRef');
119+
const labelOverflowing = useElementOverflow(label);
120+
const open = ref(props.defaultOpen);
121+
122+
function overflowChipClick(e: PointerEvent) {
123+
toggleCollapse();
124+
emit('overflowChipClick', e);
125+
}
126+
127+
function toggleCollapse() {
128+
open.value = !open.value;
129+
}
130+
131+
function render() {
132+
const children = slots.default ? findChildrenVNodes(slots.default({})) : [];
133+
134+
const chipArray = open.value ? children : children.slice(0, props.numLabels);
135+
136+
const lis = chipArray.map((child, i) => h('li', { key: i, class: styles.labelGroupListItem }, child));
137+
138+
if (children.length > props.numLabels) {
139+
const collapsedTextResult = fillTemplate(props.collapsedText, {
140+
remaining: children.length - chipArray.length,
141+
});
142+
lis.push(h('li', { class: styles.labelGroupListItem }, [
143+
h(PfLabel, {
144+
class: { [labelStyles.modifiers.compact]: props.compact },
145+
component: 'button',
146+
overflow: true,
147+
onClick: overflowChipClick as (e: Event) => void,
148+
},
149+
() => open.value ? props.expandedText : collapsedTextResult,
150+
),
151+
]));
96152
}
97153
98-
const props = withDefaults(defineProps<Props>(), {
99-
numLabels: 3,
100-
tooltipPosition: 'top',
101-
closeBtnAriaLabel: 'Close chip group',
102-
ariaLabel: 'Chip group category',
103-
expandedText: 'Show Less',
104-
collapsedText: '${remaining} more',
105-
});
106-
const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
107-
108-
const emit = defineEmits<{
109-
(name: 'click', e: PointerEvent): void;
110-
(name: 'overflowChipClick', e: PointerEvent): void;
111-
}>();
112-
113-
const slots = defineSlots<{
114-
default?: (props?: Record<never, never>) => any;
115-
'add-label-control'?: (props?: Record<never, never>) => any;
116-
}>();
117-
118-
const label = useTemplateRef('labelRef');
119-
const labelOverflowing = useElementOverflow(label);
120-
const open = ref(props.defaultOpen);
121-
122-
function overflowChipClick(e: PointerEvent) {
123-
toggleCollapse();
124-
emit('overflowChipClick', e);
125-
}
126-
127-
function toggleCollapse() {
128-
open.value = !open.value;
129-
}
130-
131-
function render() {
132-
const children = slots.default ? findChildrenVNodes(slots.default({})) : [];
133-
134-
const chipArray = open.value ? children : children.slice(0, props.numLabels);
135-
136-
const lis = chipArray.map((child, i) => h('li', { key: i, class: styles.labelGroupListItem }, child));
137-
138-
if (children.length > props.numLabels) {
139-
const collapsedTextResult = fillTemplate(props.collapsedText, {
140-
remaining: children.length - chipArray.length,
141-
});
142-
lis.push(h('li', { class: styles.labelGroupListItem }, [
143-
h(PfLabel, {
144-
class: { [labelStyles.modifiers.compact]: props.compact },
145-
component: 'button',
146-
overflow: true,
147-
onClick: overflowChipClick as (e: Event) => void,
148-
},
149-
() => open.value ? props.expandedText : collapsedTextResult,
150-
),
151-
]));
152-
}
153-
154-
return lis;
155-
}
156-
</script>
154+
return lis;
155+
}
156+
</script>

‎packages/core/src/components/SimpleList/SimpleList.vue‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,12 @@
1212
</template>
1313

1414
<script lang="ts">
15-
export const SimpleListValueKey = Symbol('SimpleListValueKey') as InjectionKey<Ref<string | number | boolean | object | symbol | undefined | null>>;
15+
export const SimpleListValueKey = Symbol('SimpleListValueKey') as InjectionKey<WritableComputedRef<string | symbol | null>>;
1616
1717
interface Props extends OUIAProps, /* @vue-ignore */ HTMLAttributes {
1818
/** Form element name */
1919
name?: string,
20+
modelValue?: string | null;
2021
required?: boolean;
2122
/** aria-label for the <ul> element that wraps the SimpleList items. */
2223
ariaLabel?: string;
@@ -26,7 +27,7 @@ interface Props extends OUIAProps, /* @vue-ignore */ HTMLAttributes {
2627
<script lang="ts" setup>
2728
import styles from '@patternfly/react-styles/css/components/SimpleList/simple-list';
2829
29-
import { type Component, type InjectionKey, provide, type HTMLAttributes, ref, type Ref } from 'vue';
30+
import { type Component, type InjectionKey, provide, type HTMLAttributes, ref, type Ref, computed, type WritableComputedRef, watch } from 'vue';
3031
import { findChildrenVNodes } from '../../util';
3132
import Wrap from '../../helpers/Wrap.vue';
3233
import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
@@ -39,13 +40,32 @@ defineOptions({
3940
const props = defineProps<Props>();
4041
const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
4142
42-
/** Value for the selected item */
43-
const value = defineModel<string | number | boolean | object | null>({ default: null });
43+
const emit = defineEmits<{
44+
/** Callback for when the model value changes */
45+
(e: 'update:modelValue', value: string): void;
46+
}>();
4447
4548
const slots = defineSlots<{
4649
default?: (props?: Record<never, never>) => any;
4750
}>();
4851
52+
/** Value for the selected item */
53+
const innerValue: Ref<string | symbol | null> = ref(props.modelValue ?? null);
54+
55+
const value = computed({
56+
get: () => innerValue.value,
57+
set: (v: string | symbol | null) => {
58+
innerValue.value = v;
59+
if (typeof v === 'string') {
60+
emit('update:modelValue', v);
61+
}
62+
},
63+
});
64+
65+
watch(() => props.modelValue, (v) => {
66+
innerValue.value = v ?? null;
67+
});
68+
4969
const grouped = ref(false);
5070
provide(SimpleListValueKey, value);
5171

‎packages/core/src/components/TextInput.vue‎

Lines changed: 23 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
v-bind="$attrs"
1919
ref="inputRef"
2020
:value="value"
21-
:type="type"
21+
:type="type ?? 'text'"
2222
:aria-invalid="effectiveValidated === 'error'"
2323
:disabled="disabled || undefined"
2424
:readonly="!!readOnlyVariant || readonly"
@@ -37,21 +37,8 @@
3737
</span>
3838
</template>
3939

40-
<script lang="ts" setup>
41-
import { computed, toRefs, type InputHTMLAttributes, getCurrentInstance, useTemplateRef } from 'vue';
42-
import { useChildrenTracker } from '../use';
43-
import styles from '@patternfly/react-styles/css/components/FormControl/form-control';
44-
import { useInputValidation, type InputValidateState } from '../input';
45-
import { FormGroupInputsKey, FormInputsKey } from './Form/common';
46-
import { useOUIAProps, type OUIAProps } from '../helpers/ouia';
47-
import PfFormControlIcon from './FormControlIcon.vue';
48-
49-
defineOptions({
50-
name: 'PfTextInput',
51-
inheritAttrs: false,
52-
});
53-
54-
interface Props extends OUIAProps, /* @vue-ignore */ Omit<InputHTMLAttributes, 'value' | 'type' | 'aria-invalid'> {
40+
<script lang="ts">
41+
interface Props<T extends InputType = 'text', N extends boolean = false> extends OUIAProps, /* @vue-ignore */ Omit<InputHTMLAttributes, 'value' | 'type' | 'aria-invalid'> {
5542
/** Flag to show if the text input is disabled. */
5643
disabled?: boolean;
5744
/** Flag to apply expanded styling */
@@ -65,23 +52,11 @@ interface Props extends OUIAProps, /* @vue-ignore */ Omit<InputHTMLAttributes, '
6552
*/
6653
validated?: InputValidateState;
6754
/** Type that the text input accepts. */
68-
type?:
69-
| 'text'
70-
| 'date'
71-
| 'datetime-local'
72-
| 'email'
73-
| 'month'
74-
| 'number'
75-
| 'password'
76-
| 'search'
77-
| 'tel'
78-
| 'time'
79-
| 'url'
80-
| 'week';
55+
type?: T;
8156
/** Value of the text input. */
8257
modelValue?: string | number | null;
8358
modelModifiers?: {
84-
number?: boolean;
59+
number?: N;
8560
trim?: boolean;
8661
lazy?: boolean;
8762
};
@@ -93,9 +68,23 @@ interface Props extends OUIAProps, /* @vue-ignore */ Omit<InputHTMLAttributes, '
9368
/** Disables validation status icon */
9469
noStatusIcon?: boolean;
9570
}
71+
</script>
72+
73+
<script lang="ts" setup generic="T extends InputType = 'text', N extends boolean = false">
74+
import { computed, toRefs, type InputHTMLAttributes, getCurrentInstance, useTemplateRef } from 'vue';
75+
import { useChildrenTracker } from '../use';
76+
import styles from '@patternfly/react-styles/css/components/FormControl/form-control';
77+
import { useInputValidation, type InputType, type InputValidateState } from '../input';
78+
import { FormGroupInputsKey, FormInputsKey } from './Form/common';
79+
import { useOUIAProps, type OUIAProps } from '../helpers/ouia';
80+
import PfFormControlIcon from './FormControlIcon.vue';
81+
82+
defineOptions({
83+
name: 'PfTextInput',
84+
inheritAttrs: false,
85+
});
9686
97-
const props = withDefaults(defineProps<Props>(), {
98-
type: 'text',
87+
const props = withDefaults(defineProps<Props<T, N>>(), {
9988
autoValidate: true,
10089
modelValue: undefined,
10190
});
@@ -108,7 +97,7 @@ defineEmits<{
10897
(name: 'input', event: Event): void;
10998
(name: 'invalid', event: Event): void;
11099
(name: 'keyup', event: KeyboardEvent): void;
111-
(name: 'update:modelValue', value: string): void;
100+
(name: 'update:modelValue', value: N extends true ? number : (T extends 'number' ? number : string)): void;
112101
(name: 'update:validated', value: InputValidateState): void;
113102
}>();
114103
@@ -135,6 +124,7 @@ const {
135124
inputElement: input,
136125
autoValidate: props.autoValidate,
137126
validated: validated,
127+
type: props.type,
138128
});
139129
140130
useChildrenTracker(FormInputsKey, getCurrentInstance()?.proxy);

‎packages/core/src/components/ToggleGroup/ToggleGroup.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,10 @@ const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
3030
3131
const value = defineModel<T | null>({ default: null });
3232
33+
defineEmits<{
34+
(e: 'update:modelValue', value: T): void;
35+
}>();
36+
3337
defineSlots<{
3438
default?: (props?: Record<never, never>) => any;
3539
}>();

0 commit comments

Comments
 (0)