diff --git a/.changeset/yellow-dragons-fly.md b/.changeset/yellow-dragons-fly.md new file mode 100644 index 0000000000..c02c09cbef --- /dev/null +++ b/.changeset/yellow-dragons-fly.md @@ -0,0 +1,5 @@ +--- +"sit-onyx": minor +--- + +feat(OnyxSelect, OnyxRadioGroup, OnyxCheckboxGroup): Implement truncation on higher level diff --git a/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue b/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue index 7a3f69474e..cf1361b3c6 100644 --- a/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue +++ b/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue @@ -14,8 +14,8 @@ const props = withDefaults(defineProps>(), { disabled: false, loading: false, required: false, - truncation: "ellipsis", skeleton: false, + truncation: "ellipsis", }); const emit = defineEmits<{ diff --git a/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue b/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue index 8c9408c58b..3577ea4fe9 100644 --- a/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue +++ b/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue @@ -13,6 +13,7 @@ const props = withDefaults(defineProps>(), { direction: "vertical", withCheckAll: false, disabled: false, + truncation: "ellipsis", }); const { densityClass } = useDensity(props); @@ -77,6 +78,7 @@ const checkAllLabel = computed(() => { v-for="option in props.options" :key="option.value.toString()" v-bind="option" + :truncation="option.truncation ?? props.truncation" :model-value="props.modelValue.includes(option.value)" class="onyx-checkbox-group__option" @update:model-value="handleUpdate(option.value, $event)" diff --git a/packages/sit-onyx/src/components/OnyxCheckboxGroup/types.ts b/packages/sit-onyx/src/components/OnyxCheckboxGroup/types.ts index efc48334aa..12297ea4b8 100644 --- a/packages/sit-onyx/src/components/OnyxCheckboxGroup/types.ts +++ b/packages/sit-onyx/src/components/OnyxCheckboxGroup/types.ts @@ -3,45 +3,46 @@ import type { RequiredMarkerProp } from "../../composables/required"; import type { AutofocusProp, BaseSelectOption, Direction, SelectOptionValue } from "../../types"; export type OnyxCheckboxGroupProps = - DensityProp & { - /** - * Checkbox options. - */ - options: CheckboxGroupOption[]; - /** - * Currently checked checkboxes. - */ - modelValue?: TValue[]; - /** - * Headline to show above all checkboxes which is also the fieldset legend. - */ - headline?: string; - /** - * Direction of the checkboxes. - */ - direction?: Direction; - /** - * If true, an additional checkbox will be displayed to check/uncheck all options. - * Disabled and skeleton checkboxes will be excluded from the check/uncheck behavior. - */ - withCheckAll?: - | boolean - | { - /** - * Label for the `select all` checkbox. - * If unset, a default label will be shown depending on the current locale/language. - */ - label?: string; - }; - /** - * Whether all checkboxes should be disabled. - */ - disabled?: boolean; - /** - * If set, the specified number of skeleton radio buttons will be shown. - */ - skeleton?: number; - }; + DensityProp & + Pick & { + /** + * Checkbox options. + */ + options: CheckboxGroupOption[]; + /** + * Currently checked checkboxes. + */ + modelValue?: TValue[]; + /** + * Headline to show above all checkboxes which is also the fieldset legend. + */ + headline?: string; + /** + * Direction of the checkboxes. + */ + direction?: Direction; + /** + * If true, an additional checkbox will be displayed to check/uncheck all options. + * Disabled and skeleton checkboxes will be excluded from the check/uncheck behavior. + */ + withCheckAll?: + | boolean + | { + /** + * Label for the `select all` checkbox. + * If unset, a default label will be shown depending on the current locale/language. + */ + label?: string; + }; + /** + * Whether all checkboxes should be disabled. + */ + disabled?: boolean; + /** + * If set, the specified number of skeleton radio buttons will be shown. + */ + skeleton?: number; + }; export type CheckboxGroupOption = BaseSelectOption & RequiredMarkerProp & AutofocusProp; diff --git a/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue b/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue index 7e87ec34a3..fb68d4f187 100644 --- a/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue +++ b/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue @@ -13,6 +13,7 @@ const props = withDefaults(defineProps>(), { headline: "", required: false, disabled: false, + truncation: "ellipsis", }); const { densityClass } = useDensity(props); @@ -57,6 +58,7 @@ const handleChange = (selected: boolean, value: TValue) => { :custom-error="props.customError" :checked="option.value === props.modelValue" :required="props.required" + :truncation="option.truncation ?? props.truncation" @validity-change="index === 0 && emit('validityChange', $event)" @change="handleChange($event, option.value)" /> diff --git a/packages/sit-onyx/src/components/OnyxRadioGroup/types.ts b/packages/sit-onyx/src/components/OnyxRadioGroup/types.ts index 987dc415ee..982a343338 100644 --- a/packages/sit-onyx/src/components/OnyxRadioGroup/types.ts +++ b/packages/sit-onyx/src/components/OnyxRadioGroup/types.ts @@ -6,7 +6,8 @@ import type { AutofocusProp, BaseSelectOption, Direction, SelectOptionValue } fr export type OnyxRadioGroupProps = DensityProp & RequiredMarkerProp & - CustomValidityProp & { + CustomValidityProp & + Pick & { /** * Options for the individual radio buttons of the group. */ diff --git a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue index 75ead73772..bf11765603 100644 --- a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue +++ b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue @@ -21,6 +21,7 @@ const props = withDefaults(defineProps>(), { loading: false, searchTerm: undefined, open: undefined, + truncation: "ellipsis", }); const emit = defineEmits<{ @@ -360,7 +361,7 @@ const selectInputProps = computed(() => { :active="option.value === activeValue" :icon="option.icon" :density="props.density" - :truncation="option.truncation" + :truncation="option.truncation ?? props.truncation" > {{ option.label }} diff --git a/packages/sit-onyx/src/components/OnyxSelect/types.ts b/packages/sit-onyx/src/components/OnyxSelect/types.ts index 3c21d5dcdd..226761cd14 100644 --- a/packages/sit-onyx/src/components/OnyxSelect/types.ts +++ b/packages/sit-onyx/src/components/OnyxSelect/types.ts @@ -64,7 +64,8 @@ export type OnyxSelectProps & SelectSearchProps & Omit, "density" | "modelValue"> & - AutofocusProp & { + AutofocusProp & + Pick & { /** * If true, the select popover is expanded and visible. * Property is managed internally, when undefined.