@adyen/bento-mcp 0.1.2 → 0.1.3

package/dist/assets/components/radio-group/radio-group.vue

@@ -1 +1 @@
-<template> <div class="b-radio-group"> <controls-group class="b-radio-group__buttons" :aria-describedby="shouldShowErrorMessage ? errorId : ''" :component-name="COMPONENT_NAME" :class="conditionalClasses" :description="description" :disabled="disabled" :form="formId" :label="label" :optional="optional" :required="required" :hide-label="hideLabel" :tooltip-text="tooltipText" role="radiogroup" :aria-readonly="isReadOnly" > <bento-radio-button v-for="item in items" ref="radioButton" :key="item.value" :model-value="inputValue" :value="item.value" :disabled="disabled || item.disabled" :readonly="isReadOnly || item.readonly" :has-error="shouldShowError || item.hasError" :tag="item.tag" :name="formId || label" @update:model-value="onUpdateModelValue" > <template #default>{{ item.label }}</template> <template v-if="item.description" #description>{{ item.description }}</template> <template v-if="hasSlot('content') && isVertical" #content> <slot name="content"></slot> </template> </bento-radio-button> <template v-if="hasSlot('description')" #description> <slot name="description" /> </template> </controls-group> <error-message v-if="shouldShowErrorMessage" :id="errorId" :error-message="errorMessage" class="b-radio-group__error-message" /> </div> </template> <script setup lang="ts"> import { computed, ref, toRef, useSlots, watch } from 'vue'; import { ControlsGroup, ErrorMessage } from '@/components/internal'; import { BentoRadioButton } from './components/radio-button'; import { useHasSlot } from '@/composables'; import { generateUid } from '@/core/utils/ts'; import { deprecate } from '@/utils/ts/deprecate'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; import { type BentoRadioGroupEmits, type BentoRadioGroupProps, BentoRadioGroupVariant } from './radio-group.types'; import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading'; /** * The name of the component to be used in the Vue devtools and console warnings. */ const COMPONENT_NAME = 'bento-radio-group'; const slots = useSlots(); const hasSlot = useHasSlot(slots); const emit = defineEmits<BentoRadioGroupEmits>(); const props = withDefaults(defineProps<BentoRadioGroupProps>(), { description: null, disabled: false, errorMessage: null, formId: null, hasError: false, hideLabel: null, modelValue: null, optional: false, readonly: false, required: false, tooltipText: null, variant: BentoRadioGroupVariant.VERTICAL, }); const inputValue = toRef(props, 'modelValue'); const errorId = generateUid('error'); const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly')); const { emitValue } = useFormFieldEmits(emit); const radioButton = ref(null); const shouldShowError = computed( () => !props.disabled && !isReadOnly.value && (!!props.errorMessage || props.hasError) ); const shouldShowErrorMessage = computed(() => !props.disabled && !isReadOnly.value && !!props.errorMessage); const conditionalClasses = computed(() => ({ 'b-radio-group__buttons--horizontal': props.variant === BentoRadioGroupVariant.HORIZONTAL, })); // Content slot logic const isVertical = computed(() => props.variant === 'vertical'); const shouldShowSlotError = computed(() => hasSlot('content') && !isVertical?.value); const onUpdateModelValue = value => { emitValue(value); }; if (props.hasError) { deprecate( 'BentoRadioGroup "hasError" property', `Use the BentoRadioGroup "errorMessage" property instead to indicate that there is a modifier error. Having the field as "undefined" will hide/remove the error. <bento-radio-group errorMessage="Error message text" />`, '2.0.0' ); } watch( shouldShowSlotError, newVal => { if (newVal) { throw new Error('The content slot is only available for the vertical radio group layout'); } }, { immediate: true, } ); const focus = () => { radioButton.value[0].focus(); }; defineExpose({ focus, }); </script> <script lang="ts"> /** * A radio group component should be used whenever it is necessary to use a set of radio buttons * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/ * * import { BentoRadioGroup } from '@adyen/bento-vue2/'; * * export default { * components: { BentoRadioGroup }, * template: ` * <bento-radio-group * label="Your group label" * :items="[ * { value: 1, label: 'Your label' }, * { value: 2, label: 'Another label', description: 'Your descriptive sub label' }, * ]" * variant="horizontal" * /> * ` * }; */ export default { name: 'bento-radio-group', model: { prop: 'modelValue' }, }; </script> <style lang="scss" scoped src="./radio-group.scss" /> 
+<template> <div class="b-radio-group"> <controls-group class="b-radio-group__buttons" :aria-describedby="shouldShowErrorMessage ? errorId : ''" :aria-required="required" :component-name="COMPONENT_NAME" :class="conditionalClasses" :description="description" :disabled="disabled" :form="formId" :label="label" :optional="optional" :required="required" :hide-label="hideLabel" :tooltip-text="tooltipText" role="radiogroup" :aria-readonly="isReadOnly" > <bento-radio-button v-for="item in items" ref="radioButton" :key="item.value" :model-value="inputValue" :value="item.value" :disabled="disabled || item.disabled" :readonly="isReadOnly || item.readonly" :has-error="shouldShowError || item.hasError" :tag="item.tag" :name="formId || label" @update:model-value="onUpdateModelValue" > <template #default>{{ item.label }}</template> <template v-if="item.description" #description>{{ item.description }}</template> <template v-if="hasSlot('content') && isVertical" #content> <slot name="content"></slot> </template> </bento-radio-button> <template v-if="hasSlot('description')" #description> <slot name="description" /> </template> </controls-group> <error-message v-if="shouldShowErrorMessage" :id="errorId" :error-message="errorMessage" class="b-radio-group__error-message" /> </div> </template> <script setup lang="ts"> import { computed, ref, toRef, useSlots, watch } from 'vue'; import { ControlsGroup, ErrorMessage } from '@/components/internal'; import { BentoRadioButton } from './components/radio-button'; import { useHasSlot } from '@/composables'; import { generateUid } from '@/core/utils/ts'; import { deprecate } from '@/utils/ts/deprecate'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; import { type BentoRadioGroupEmits, type BentoRadioGroupProps, BentoRadioGroupVariant } from './radio-group.types'; import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading'; /** * The name of the component to be used in the Vue devtools and console warnings. */ const COMPONENT_NAME = 'bento-radio-group'; const slots = useSlots(); const hasSlot = useHasSlot(slots); const emit = defineEmits<BentoRadioGroupEmits>(); const props = withDefaults(defineProps<BentoRadioGroupProps>(), { description: null, disabled: false, errorMessage: null, formId: null, hasError: false, hideLabel: null, modelValue: null, optional: false, readonly: false, required: false, tooltipText: null, variant: BentoRadioGroupVariant.VERTICAL, }); const inputValue = toRef(props, 'modelValue'); const errorId = generateUid('error'); const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly')); const { emitValue } = useFormFieldEmits(emit); const radioButton = ref(null); const shouldShowError = computed( () => !props.disabled && !isReadOnly.value && (!!props.errorMessage || props.hasError) ); const shouldShowErrorMessage = computed(() => !props.disabled && !isReadOnly.value && !!props.errorMessage); const conditionalClasses = computed(() => ({ 'b-radio-group__buttons--horizontal': props.variant === BentoRadioGroupVariant.HORIZONTAL, })); // Content slot logic const isVertical = computed(() => props.variant === 'vertical'); const shouldShowSlotError = computed(() => hasSlot('content') && !isVertical?.value); const onUpdateModelValue = value => { emitValue(value); }; if (props.hasError) { deprecate( 'BentoRadioGroup "hasError" property', `Use the BentoRadioGroup "errorMessage" property instead to indicate that there is a modifier error. Having the field as "undefined" will hide/remove the error. <bento-radio-group errorMessage="Error message text" />`, '2.0.0' ); } watch( shouldShowSlotError, newVal => { if (newVal) { throw new Error('The content slot is only available for the vertical radio group layout'); } }, { immediate: true, } ); const focus = () => { radioButton.value[0].focus(); }; defineExpose({ focus, }); </script> <script lang="ts"> /** * A radio group component should be used whenever it is necessary to use a set of radio buttons * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/ * * import { BentoRadioGroup } from '@adyen/bento-vue2/'; * * export default { * components: { BentoRadioGroup }, * template: ` * <bento-radio-group * label="Your group label" * :items="[ * { value: 1, label: 'Your label' }, * { value: 2, label: 'Another label', description: 'Your descriptive sub label' }, * ]" * variant="horizontal" * /> * ` * }; */ export default { name: 'bento-radio-group', model: { prop: 'modelValue' }, }; </script> <style lang="scss" scoped src="./radio-group.scss" /> 

package/dist/assets/components/rich-text-editor/rich-text-editor.vue

@@ -1 +1 @@
-<template> <bento-typography el="div" class="b-rich-text-editor" rich-text> <field-label v-if="!hideLabel" :label="label" :tooltip-text="tooltipText" :required="required" /> <div v-bind="attrs" class="b-rich-text-editor__container" data-testid="rich-text-editor-container" :aria-disabled="disabled" :class="conditionalClasses" > <div class="b-rich-text-editor__toolbar"> <bento-segmented-control v-model="selectedMode" :items="richTextEditorModeOptions" /> </div> <keep-alive> <rich-text-editor-content-area v-if="selectedMode === 'markdown'" :value="internalValue" role="textbox" aria-multiline="true" :disabled="disabled" :aria-label="computedAriaLabel" :aria-describedby="ariaDescribedBy" @input="onInput" /> <bento-alert v-else-if="error" type="critical"> <template #default> {{ t('errorProcessingMarkdown', { value: error }) }} </template> </bento-alert> <rich-text-editor-renderer v-else :node="node" class="b-rich-text-editor__renderer" :class="rendererConditionalClasses" /> </keep-alive> </div> <error-message v-if="!!errorMessage" :id="errorId" :error-message="errorMessage" class="b-rich-text-editor__error-message" /> <span v-if="description" :id="descriptionId" class="b-rich-text-editor__description"> <bento-typography el="span" variant="body">{{ description }}</bento-typography> </span> </bento-typography> </template> <script setup lang="ts"> import { computed, ref, useAttrs, watch } from 'vue'; import type { Root } from 'mdast'; // Components import BentoTypography from '@/components/typography/typography.vue'; import BentoSegmentedControl from '@/components/segmented-control/segmented-control.vue'; import BentoAlert from '@/components/alert/alert.vue'; import { ErrorMessage, FieldLabel } from '@/internal'; import RichTextEditorContentArea from './components/rich-text-editor-content-area/rich-text-editor-content-area.vue'; import RichTextEditorRenderer from './components/rich-text-editor-renderer/rich-text-editor-renderer'; import type { BentoRichTextEditorMode, BentoRichTextEditorProps } from './rich-text-editor.types'; // Utils import { useI18n } from '@/utils/ts/i18n'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { generateUid } from '@/core/utils/ts'; import { parseMarkdown } from './utils'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const errorId = generateUid('rich-text-editor-error'); const descriptionId = generateUid('rich-text-editor-description'); const attrs = useAttrs(); const props = withDefaults(defineProps<BentoRichTextEditorProps>(), { description: null, disabled: false, errorMessage: null, hideLabel: null, label: null, mode: 'markdown', required: false, tooltipText: null, value: null, }); const emit = defineEmits<{ /** * Emmited when the content of the editor changes */ (e: 'input', value: string): void; }>(); const selectedMode = ref<BentoRichTextEditorMode>(props.mode); const internalValue = ref(props.value); const node = ref<Root>(null); const error = ref<Error>(null); const richTextEditorModeOptions = computed< Array<{ label: string; value: BentoRichTextEditorMode; disabled: boolean; }> >(() => [ { label: t('visual'), value: 'visual', disabled: props.disabled, }, { label: t('markdown'), value: 'markdown', disabled: props.disabled, }, ]); const conditionalClasses = computed(() => ({ 'b-rich-text-editor__container--disabled': props.disabled, 'b-rich-text-editor__container--error': props.errorMessage, })); const rendererConditionalClasses = computed(() => ({ 'b-rich-text-editor__renderer--disabled': props.disabled, })); // ARIA const computedAriaLabelFallbackMessage = computed(() => t('ariaLabelFallback')); const ariaLabelAttribute = ref(attrs['aria-label']); const computedAriaLabel = useAriaLabel({ ariaLabel: ariaLabelAttribute.value as string, defaultFallback: computedAriaLabelFallbackMessage, }); const ariaDescribedBy = computed( () => `${props.description ? descriptionId : ''} ${props.errorMessage ? errorId : ''}`.trim() || null ); /** * Turns internal value into an AST Node */ function updateNodeValue() { try { node.value = parseMarkdown(internalValue.value); error.value = null; } catch (e) { node.value = null; error.value = e.message.split(':')[1]; } } const onInput = (newContentValue: string) => { internalValue.value = newContentValue; }; watch(internalValue, (newValue: string) => { node.value = null; // Invalidate previously parsed node emit('input', newValue); }); watch( selectedMode, newVal => { if (newVal === 'visual' && !node.value) { updateNodeValue(); } }, { immediate: true } ); </script> <script lang="ts"> /** * An editable content area with additional functionality * that allows to change text styling and add links and tables. * * @example * import { BentoRichTextEditor } from '@adyen/bento-vue2'; * * export default { * components: { BentoRichTextEditor }, * template: ` * <bento-rich-text-editor * v-model="value" * :label="label" * :description="description" * :disabled="false" * /> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./rich-text-editor.scss" /> 
+<template> <bento-typography el="div" class="b-rich-text-editor" rich-text> <field-label v-if="!hideLabel" :label="label" :tooltip-text="tooltipText" :required="required" /> <div v-bind="attrs" class="b-rich-text-editor__container" data-testid="rich-text-editor-container" :aria-disabled="disabled" :class="conditionalClasses" > <div class="b-rich-text-editor__toolbar"> <bento-segmented-control v-model="selectedMode" :items="richTextEditorModeOptions" /> </div> <keep-alive> <rich-text-editor-content-area v-if="selectedMode === 'markdown'" :value="internalValue" role="textbox" aria-multiline="true" :disabled="disabled" :aria-label="computedAriaLabel" :aria-describedby="ariaDescribedBy" :aria-required="required" @input="onInput" /> <bento-alert v-else-if="error" type="critical"> <template #default> {{ t('errorProcessingMarkdown', { value: error }) }} </template> </bento-alert> <rich-text-editor-renderer v-else :node="node" class="b-rich-text-editor__renderer" :class="rendererConditionalClasses" /> </keep-alive> </div> <error-message v-if="!!errorMessage" :id="errorId" :error-message="errorMessage" class="b-rich-text-editor__error-message" /> <span v-if="description" :id="descriptionId" class="b-rich-text-editor__description"> <bento-typography el="span" variant="body">{{ description }}</bento-typography> </span> </bento-typography> </template> <script setup lang="ts"> import { computed, ref, useAttrs, watch } from 'vue'; import type { Root } from 'mdast'; // Components import BentoTypography from '@/components/typography/typography.vue'; import BentoSegmentedControl from '@/components/segmented-control/segmented-control.vue'; import BentoAlert from '@/components/alert/alert.vue'; import { ErrorMessage, FieldLabel } from '@/internal'; import RichTextEditorContentArea from './components/rich-text-editor-content-area/rich-text-editor-content-area.vue'; import RichTextEditorRenderer from './components/rich-text-editor-renderer/rich-text-editor-renderer'; import type { BentoRichTextEditorMode, BentoRichTextEditorProps } from './rich-text-editor.types'; // Utils import { useI18n } from '@/utils/ts/i18n'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { generateUid } from '@/core/utils/ts'; import { parseMarkdown } from './utils'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const errorId = generateUid('rich-text-editor-error'); const descriptionId = generateUid('rich-text-editor-description'); const attrs = useAttrs(); const props = withDefaults(defineProps<BentoRichTextEditorProps>(), { description: null, disabled: false, errorMessage: null, hideLabel: null, label: null, mode: 'markdown', required: false, tooltipText: null, value: null, }); const emit = defineEmits<{ /** * Emmited when the content of the editor changes */ (e: 'input', value: string): void; }>(); const selectedMode = ref<BentoRichTextEditorMode>(props.mode); const internalValue = ref(props.value); const node = ref<Root>(null); const error = ref<Error>(null); const richTextEditorModeOptions = computed< Array<{ label: string; value: BentoRichTextEditorMode; disabled: boolean; }> >(() => [ { label: t('visual'), value: 'visual', disabled: props.disabled, }, { label: t('markdown'), value: 'markdown', disabled: props.disabled, }, ]); const conditionalClasses = computed(() => ({ 'b-rich-text-editor__container--disabled': props.disabled, 'b-rich-text-editor__container--error': props.errorMessage, })); const rendererConditionalClasses = computed(() => ({ 'b-rich-text-editor__renderer--disabled': props.disabled, })); // ARIA const computedAriaLabelFallbackMessage = computed(() => t('ariaLabelFallback')); const ariaLabelAttribute = ref(attrs['aria-label']); const computedAriaLabel = useAriaLabel({ ariaLabel: ariaLabelAttribute.value as string, defaultFallback: computedAriaLabelFallbackMessage, }); const ariaDescribedBy = computed( () => `${props.description ? descriptionId : ''} ${props.errorMessage ? errorId : ''}`.trim() || null ); /** * Turns internal value into an AST Node */ function updateNodeValue() { try { node.value = parseMarkdown(internalValue.value); error.value = null; } catch (e) { node.value = null; error.value = e.message.split(':')[1]; } } const onInput = (newContentValue: string) => { internalValue.value = newContentValue; }; watch(internalValue, (newValue: string) => { node.value = null; // Invalidate previously parsed node emit('input', newValue); }); watch( selectedMode, newVal => { if (newVal === 'visual' && !node.value) { updateNodeValue(); } }, { immediate: true } ); </script> <script lang="ts"> /** * An editable content area with additional functionality * that allows to change text styling and add links and tables. * * @example * import { BentoRichTextEditor } from '@adyen/bento-vue2'; * * export default { * components: { BentoRichTextEditor }, * template: ` * <bento-rich-text-editor * v-model="value" * :label="label" * :description="description" * :disabled="false" * /> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./rich-text-editor.scss" /> 

package/dist/assets/components/selection-card/components/selection-card-group/selection-card-group.vue

@@ -1 +1 @@
-<template> <controls-group ref="containerRef" :aria-describedby="shouldShowGroupError ? errorMessageId : null" :label="label" :hide-label="hideLabel" :description="description" :disabled="disabled" :tooltip-text="tooltipText" :readonly="readonly" :required="required" :optional="optional" class="b-selection-card-group" component-name="selection-card-group" > <div v-if="!itemsPerRow || layout === 'vertical'" class="b-selection-card-group__items" :class="conditionalItemsClasses" > <bento-selection-card v-for="item in items" :key="`selection-card-${item.value}`" class="b-selection-card-group__item" v-bind="item" :model-value="inputValue" :readonly="readonly || item.readonly" :has-error="shouldShowGroupError" :disabled="disabled || item.disabled" @update:model-value="onInput" > <template v-if="hasSlot('icon') && item.icon" #icon> <slot name="icon" v-bind="item"></slot> </template> <template v-if="hasSlot('content') && item.content" #content> <slot name="content" v-bind="item"></slot> </template> <template v-if="hasSlot('dynamicContent') && item.dynamicContent" #dynamicContent> <slot name="dynamicContent" v-bind="item"></slot> </template> </bento-selection-card> </div> <template v-else> <div :key="`selection-card-group-layout-breakpoint-${currentBreakpoint}`"> <grid-layout v-for="(row, rowIndex) in computedRows" :key="`selection-card-group-row-${rowIndex}-cols-${computedItemsPerRow}`" class="b-selection-card-group__items--wrap" :column-width="computedColumnWidth" > <template v-for="(item, columnIndex) in row" #[`col-${columnIndex+1}`]> <bento-selection-card :key="`selection-card-${item.value}`" class="b-selection-card-group__item b-selection-card-group__item--full-height" v-bind="item" :model-value="inputValue" :readonly="readonly || item.readonly" :has-error="shouldShowGroupError" :disabled="disabled || item.disabled" @update:model-value="onInput" > <template v-if="hasSlot('icon') && item.icon" #icon> <slot name="icon" v-bind="item"></slot> </template> <template v-if="hasSlot('content') && item.content" #content> <slot name="content" v-bind="item"></slot> </template> <template v-if="hasSlot('dynamicContent') && item.dynamicContent" #dynamicContent> <slot name="dynamicContent" v-bind="item"></slot> </template> </bento-selection-card> </template> </grid-layout> </div> </template> <error-message v-if="shouldShowGroupError" :id="errorMessageId" :error-message="errorMessage" class="b-selection-card-group__error-message" /> </controls-group> </template> <script setup lang="ts"> import { computed, onMounted, provide, ref, useSlots, watch } from 'vue'; import { useElementSize } from '@vueuse/core'; import { BMediaQueryMMax, BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6'; import { type BentoSelectionCardGroupEmits, type BentoSelectionCardGroupProps } from './selection-card-group.types'; import BentoSelectionCard from '../../selection-card.vue'; import { ControlsGroup, ErrorMessage, GridLayout } from '../../../internal'; import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from '../../selection-card.keys'; import { generateUid } from '@/core/utils/ts'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; const props = withDefaults(defineProps<BentoSelectionCardGroupProps>(), { description: null, disabled: false, errorMessage: null, formId: null, hideLabel: null, label: null, layout: 'vertical', itemsPerRow: undefined, modelValue: null, optional: false, required: false, tooltipText: null, readonly: false, variant: 'checkbox', }); const emit = defineEmits<BentoSelectionCardGroupEmits>(); const { emitValue } = useFormFieldEmits(emit); const slots = useSlots(); // Slots logic // Temporary, use-has-slots composable doesn't currently work for vue3 named scoped slots // We do the same in bento-checkbox-group const hasSlot = name => !!slots[name]; const conditionalItemsClasses = computed(() => ({ 'b-selection-card-group__items--horizontal': props.layout === 'horizontal', })); const inputValue = ref(props.modelValue); watch( () => props.modelValue, () => { inputValue.value = props.modelValue; } ); // Error message logic const errorMessageId = generateUid('error'); const shouldShowGroupError = computed(() => !props.disabled && !props.readonly && !!props.errorMessage); // itemsPerRow logic const containerRef = ref<HTMLElement | null>(null); const { width } = useElementSize(containerRef); const smallBreakpoint = computed(() => BMediaQuerySMax.split('px')[0]); const mediumBreakpoint = computed(() => BMediaQueryMMax.split('px')[0]); const currentBreakpoint = computed(() => { if (width.value < smallBreakpoint.value) { return 'small'; } if (width.value >= smallBreakpoint.value && width.value < mediumBreakpoint.value) { return 'medium'; } return 'large'; }); const computedItemsPerRow = computed(() => { return (props.itemsPerRow?.[currentBreakpoint?.value] as number) || props.items.length; }); const computedRows = computed(() => { if (!props.itemsPerRow) { return []; } const rows = []; for (let i = 0; i < props.items.length; i += computedItemsPerRow?.value) { rows.push(props.items.slice(i, i + computedItemsPerRow?.value)); } return rows; }); // We need to compute the column width on 12 because we're using a 12-column system for out grid-layout logic const itemColumnWidth = computed(() => 12 / computedItemsPerRow?.value); /** * Filling the columnWidth array with the same parameters per item to pass * to the `grid-layout` layout so the each card can have * the same width according to the screen size. */ const computedColumnWidth = computed(() => { return computedItemsPerRow?.value ? new Array(computedItemsPerRow?.value).fill({ // Instead of passing the actual screen sizes values, passing the same values per each screen size and recomputing it makes sure visually the change is smoother and not laggy small: itemColumnWidth.value, medium: itemColumnWidth.value, large: itemColumnWidth.value, }) : []; }); const onInput = value => { inputValue.value = value; emitValue(value); }; const isRadioVariant = computed(() => props.variant === 'radio'); provide(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, isRadioVariant); onMounted(() => { if (props.itemsPerRow) { Object.values(props.itemsPerRow).forEach(el => { if (el && (el < 2 || el > 6)) { throw new Error( 'itemsPerRow values must have a value between 2 and 6 items per row. Read the documentation for more information.' ); } }); } }); </script> <script lang="ts"> /** * Group of bento-selection-cards. * * @example * import { BentoSelectionCardGroup } from '@adyen/bento-vue2'; * * export default { * components: { BentoSelectionCardGroup }, * template: ` * <bento-selection-card-group * :items="[ * { * title: 'Card 1', * value: 'card-1', * content: 'Slot content 1', * icon: RetailIcon, * }, * { * title: 'Card 2', * value: 'card-2', * content: 'Slot content 2', * icon: LeafIcon, * }, * ]" * > * <template #icon="{ icon }"> * <component :is="icon"/> * </template> * <template #content="{ content }"> * <div>{{ content }}</div> * </template> * </bento-selection-card-group> * `, * } */ export default { model: { prop: 'modelValue' }, }; </script> <style lang="scss" scoped src="./selection-card-group.scss" /> 
+<template> <controls-group ref="containerRef" :aria-describedby="shouldShowGroupError ? errorMessageId : null" :aria-required="required" :label="label" :hide-label="hideLabel" :description="description" :disabled="disabled" :tooltip-text="tooltipText" :readonly="readonly" :required="required" :optional="optional" class="b-selection-card-group" component-name="selection-card-group" > <div v-if="!itemsPerRow || layout === 'vertical'" class="b-selection-card-group__items" :class="conditionalItemsClasses" > <bento-selection-card v-for="item in items" :key="`selection-card-${item.value}`" class="b-selection-card-group__item" v-bind="item" :model-value="inputValue" :readonly="readonly || item.readonly" :has-error="shouldShowGroupError" :disabled="disabled || item.disabled" @update:model-value="onInput" > <template v-if="hasSlot('icon') && item.icon" #icon> <slot name="icon" v-bind="item"></slot> </template> <template v-if="hasSlot('content') && item.content" #content> <slot name="content" v-bind="item"></slot> </template> <template v-if="hasSlot('dynamicContent') && item.dynamicContent" #dynamicContent> <slot name="dynamicContent" v-bind="item"></slot> </template> </bento-selection-card> </div> <template v-else> <div :key="`selection-card-group-layout-breakpoint-${currentBreakpoint}`"> <grid-layout v-for="(row, rowIndex) in computedRows" :key="`selection-card-group-row-${rowIndex}-cols-${computedItemsPerRow}`" class="b-selection-card-group__items--wrap" :column-width="computedColumnWidth" > <template v-for="(item, columnIndex) in row" #[`col-${Number(columnIndex)+1}`]> <bento-selection-card :key="`selection-card-${item.value}`" class="b-selection-card-group__item b-selection-card-group__item--full-height" v-bind="item" :model-value="inputValue" :readonly="readonly || item.readonly" :has-error="shouldShowGroupError" :disabled="disabled || item.disabled" @update:model-value="onInput" > <template v-if="hasSlot('icon') && item.icon" #icon> <slot name="icon" v-bind="item"></slot> </template> <template v-if="hasSlot('content') && item.content" #content> <slot name="content" v-bind="item"></slot> </template> <template v-if="hasSlot('dynamicContent') && item.dynamicContent" #dynamicContent> <slot name="dynamicContent" v-bind="item"></slot> </template> </bento-selection-card> </template> </grid-layout> </div> </template> <error-message v-if="shouldShowGroupError" :id="errorMessageId" :error-message="errorMessage" class="b-selection-card-group__error-message" /> </controls-group> </template> <script setup lang="ts"> import { computed, onMounted, provide, ref, useSlots, watch } from 'vue'; import { useElementSize } from '@vueuse/core'; import { BMediaQueryMMax, BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6'; import { type BentoSelectionCardGroupEmits, type BentoSelectionCardGroupProps } from './selection-card-group.types'; import BentoSelectionCard from '../../selection-card.vue'; import { ControlsGroup, ErrorMessage, GridLayout } from '../../../internal'; import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from '../../selection-card.keys'; import { generateUid } from '@/core/utils/ts'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; const props = withDefaults(defineProps<BentoSelectionCardGroupProps>(), { description: null, disabled: false, errorMessage: null, formId: null, hideLabel: null, label: null, layout: 'vertical', itemsPerRow: undefined, modelValue: null, optional: false, required: false, tooltipText: null, readonly: false, variant: 'checkbox', }); const emit = defineEmits<BentoSelectionCardGroupEmits>(); const { emitValue } = useFormFieldEmits(emit); const slots = useSlots(); // Slots logic // Temporary, use-has-slots composable doesn't currently work for vue3 named scoped slots // We do the same in bento-checkbox-group const hasSlot = name => !!slots[name]; const conditionalItemsClasses = computed(() => ({ 'b-selection-card-group__items--horizontal': props.layout === 'horizontal', })); const inputValue = ref(props.modelValue); watch( () => props.modelValue, () => { inputValue.value = props.modelValue; } ); // Error message logic const errorMessageId = generateUid('error'); const shouldShowGroupError = computed(() => !props.disabled && !props.readonly && !!props.errorMessage); // itemsPerRow logic const containerRef = ref<HTMLElement | null>(null); const { width } = useElementSize(containerRef); const smallBreakpoint = computed(() => BMediaQuerySMax.split('px')[0]); const mediumBreakpoint = computed(() => BMediaQueryMMax.split('px')[0]); const currentBreakpoint = computed(() => { if (width.value < smallBreakpoint.value) { return 'small'; } if (width.value >= smallBreakpoint.value && width.value < mediumBreakpoint.value) { return 'medium'; } return 'large'; }); const computedItemsPerRow = computed(() => { return (props.itemsPerRow?.[currentBreakpoint?.value] as number) || props.items.length; }); const computedRows = computed(() => { if (!props.itemsPerRow) { return []; } const rows = []; for (let i = 0; i < props.items.length; i += computedItemsPerRow?.value) { rows.push(props.items.slice(i, i + computedItemsPerRow?.value)); } return rows; }); // We need to compute the column width on 12 because we're using a 12-column system for out grid-layout logic const itemColumnWidth = computed(() => 12 / computedItemsPerRow?.value); /** * Filling the columnWidth array with the same parameters per item to pass * to the `grid-layout` layout so the each card can have * the same width according to the screen size. */ const computedColumnWidth = computed(() => { return computedItemsPerRow?.value ? new Array(computedItemsPerRow?.value).fill({ // Instead of passing the actual screen sizes values, passing the same values per each screen size and recomputing it makes sure visually the change is smoother and not laggy small: itemColumnWidth.value, medium: itemColumnWidth.value, large: itemColumnWidth.value, }) : []; }); const onInput = value => { inputValue.value = value; emitValue(value); }; const isRadioVariant = computed(() => props.variant === 'radio'); provide(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, isRadioVariant); onMounted(() => { if (props.itemsPerRow) { Object.values(props.itemsPerRow).forEach(el => { if (el && (el < 2 || el > 6)) { throw new Error( 'itemsPerRow values must have a value between 2 and 6 items per row. Read the documentation for more information.' ); } }); } }); </script> <script lang="ts"> /** * Group of bento-selection-cards. * * @example * import { BentoSelectionCardGroup } from '@adyen/bento-vue2'; * * export default { * components: { BentoSelectionCardGroup }, * template: ` * <bento-selection-card-group * :items="[ * { * title: 'Card 1', * value: 'card-1', * content: 'Slot content 1', * icon: RetailIcon, * }, * { * title: 'Card 2', * value: 'card-2', * content: 'Slot content 2', * icon: LeafIcon, * }, * ]" * > * <template #icon="{ icon }"> * <component :is="icon"/> * </template> * <template #content="{ content }"> * <div>{{ content }}</div> * </template> * </bento-selection-card-group> * `, * } */ export default { model: { prop: 'modelValue' }, }; </script> <style lang="scss" scoped src="./selection-card-group.scss" /> 

package/dist/assets/components/textarea/textarea.vue

@@ -1 +1 @@
-<template> <div ref="textareaComponent" class="b-textarea" :class="conditionalClasses"> <div :style="{ width: textareaWrapperWidth }"> <div class="b-textarea__label-box" :class="conditionalClassesLabelBox"> <field-label v-if="label" :for="textareaId" :label="label" :tooltip-text="tooltipText" :optional="optional" :required="required" /> <bento-typography v-if="characterLimit" el="span" class="b-textarea__label-item" :class="conditionalClassesLabelItem" > {{ counter }} </bento-typography> </div> <bento-typography el="div" class="b-textarea__input-box" :aria-disabled="disabled"> <textarea :id="textareaId" ref="textareaElement" :value="textareaValue" class="b-textarea__input" :class="conditionalClassesInput" :aria-label="computedAriaLabel" :aria-invalid="invalidInput" :readonly="isReadOnly" :required="required" :disabled="disabled" :placeholder="placeholder" :style="{ resize: resizable, height: textareaHeight }" @blur="onBlur" @change="onChange" @focus="onFocus" @input="onInput" @keydown.esc="onPressEscape" @keydown="onKeyDown" @keyup="onKeyUp" @mousedown="onMouseDown" @mouseup="onMouseUp" > </textarea> <div v-if="showClearButton" class="b-textarea__clear-button"> <bento-button variant="tertiary" :disabled="disabled" @click="onClear" @keypress.enter="onClear" @keyup.space="onClear" > <template #iconLeft> <cross-circle-fill-small-icon :svg-title="t('clearText')" /> </template> </bento-button> </div> </bento-typography> <error-message v-if="isOverCharacterLimit" :error-message="counterErrorText" /> <error-message v-if="errorMessage" :error-message="errorMessage" /> <bento-typography v-if="description" class="b-textarea__description" el="span"> {{ description }} </bento-typography> </div> </div> </template> <script setup lang="ts"> import { computed, nextTick, onMounted, onUnmounted, ref, toRef, toRefs, useAttrs, watch } from 'vue'; // Components import { BentoButton } from '@/components/button'; import { BentoTypography } from '@/components/typography'; import { ErrorMessage, FieldLabel } from '@/internal'; import CrossCircleFillSmallIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill-small'; // Utils import { generateUid } from '@/core/utils/ts'; import { observeSizeOfElement } from '@/utils/ts/resize'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { useI18n } from '@/utils/ts/i18n'; import { deprecate } from '@/utils/ts/deprecate'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; // Composables import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading'; // Constants import { BBorderWidthAttention } from '@adyen/bento-design-tokens/dist/js/bento/es6'; // Types import { BentoTextareaEvent, type BentoTextareaProps, BentoTextareaStateClass } from './textarea.types'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const attrs = useAttrs(); const props = withDefaults(defineProps<BentoTextareaProps>(), { ariaLabel: undefined, characterLimit: undefined, description: '', disabled: false, clearable: false, errorMessage: '', height: null, label: '', optional: false, placeholder: '', readonly: false, resizable: 'both', required: false, tooltipText: null, value: '', modelValue: '', }); const emit = defineEmits<{ /** * Emitted when the element has lost focus */ (e: BentoTextareaEvent.BLUR): void; /** * Emitted when the user modifies the element's value. Unlike the 'input' event, the change event is not necessarily fired for each alteration to an element's value */ (e: BentoTextareaEvent.CHANGE): void; /** * Emitted when the "Clear" button was clicked */ (e: BentoTextareaEvent.CLEAR): void; /** * Emitted when the "ESC" key is pressed */ (e: BentoTextareaEvent.ESCAPE_PRESSED): void; /** * Emitted when the element has received focus */ (e: BentoTextareaEvent.FOCUS): void; /** * Emitted when the component's model changes * * @deprecated since version 2.0. Use `v-model` or `update:model-value` instead. * */ (e: BentoTextareaEvent.INPUT, value: string): void; /** * Emitted when the component's model changes */ (e: BentoTextareaEvent.UPDATE_MODEL_VALUE, value: string): void; /** * Emitted when the text area keydown event is fired */ (e: BentoTextareaEvent.KEYDOWN, event: KeyboardEvent): void; /** * Emitted when the text area keyup event is fired */ (e: BentoTextareaEvent.KEYUP, event: KeyboardEvent): void; }>(); const { height } = toRefs(props); const textareaId = generateUid('textarea'); const textareaElement = ref<HTMLTextAreaElement>(null); const textareaComponent = ref<HTMLDivElement>(null); const textareaValue = ref(props.modelValue || props.value); const defaultTextareaHeight = 44; const textareaHeight = ref(props.height || `${defaultTextareaHeight}px`); const userSetHeight = ref<number>(0); const textareaWrapperWidth = ref('100%'); // The width set to the wrapper of the label, textarea and description const isUserResizing = ref(false); let textareaElementObserver: ResizeObserver | null = null; let textareaComponentObserver: ResizeObserver | null = null; const { t, n } = useI18n<{ message: MessageSchema }>({ messages }); const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly')); const { emitValue } = useFormFieldEmits<string>(emit); const counter = computed(() => `${n(textareaValue?.value?.length ?? 0)} / ${n(props.characterLimit)}`); const isDynamicHeight = computed(() => !height.value); const isOverCharacterLimit = computed( () => props.characterLimit && textareaValue.value.length > props.characterLimit ); /** * Calculates and sets the height of the textarea. * The height is determined by the maximum of the following values: * * 1. The content's scroll height (with a minimum of `defaultTextareaHeight`) + the border width. * 2. The height set by the user manually resizing the textarea (`userSetHeight`). * 3. The default minimum height (`defaultTextareaHeight`). * * This ensures the textarea grows with content, shrinks when content is removed, * but never goes below the manually set height or the default height. */ const calculateHeight = () => { if (textareaElement.value) { const newHeight = Math.max( textareaElement.value.scrollHeight <= defaultTextareaHeight ? defaultTextareaHeight : textareaElement.value.scrollHeight + TEXTAREA_BORDER_WIDTH * 2, userSetHeight.value, defaultTextareaHeight ); textareaHeight.value = `${newHeight}px`; } }; watch(height, () => { if (isDynamicHeight.value) { calculateHeight(); } else { textareaHeight.value = height.value; } }); watch( () => [props.value, props.modelValue], () => { textareaValue.value = props.modelValue || props.value; }, { immediate: true } ); watch( () => textareaValue.value, async () => { if (isDynamicHeight.value) { // Hack to make the textarea calculate its height properly // Set the textarea back to the original value before calculating the height textareaHeight.value = `${defaultTextareaHeight}px`; if (!textareaValue.value) { return; } await nextTick(); calculateHeight(); } }, { immediate: true } ); const invalidInput = computed(() => !!props.errorMessage || isOverCharacterLimit.value); const conditionalClasses = computed(() => ({ [`b-textarea--${BentoTextareaStateClass.DISABLED}`]: props.disabled, })); const conditionalClassesInput = computed(() => ({ [`b-textarea__input--${BentoTextareaStateClass.CLEARABLE}`]: props.clearable, [`b-textarea__input--${BentoTextareaStateClass.READONLY}`]: isReadOnly.value, [`b-textarea__input--${BentoTextareaStateClass.ERROR}`]: invalidInput.value, [`b-textarea__input--dynamic-height`]: isDynamicHeight.value, })); const conditionalClassesLabelBox = computed(() => ({ [`b-textarea__label-box--no-label`]: !props.label, })); const conditionalClassesLabelItem = computed(() => ({ [`b-textarea__label-item--${BentoTextareaStateClass.ERROR}`]: isOverCharacterLimit.value, })); const counterErrorText = computed(() => t('yourTextCanBenAtMost', { characterLimit: props.characterLimit })); const ariaLabelAttribute = ref(attrs['aria-label']); const { ariaLabel, label } = toRefs(props); const computedAriaLabel = useAriaLabel({ ariaLabel: ariaLabelAttribute.value as string, // TODO: take this line away when the aria-label props is removed label: ariaLabel, defaultFallback: label, }); const showClearButton = computed( () => props.clearable && textareaValue.value && !props.disabled && !isReadOnly.value ); const onClear = () => { textareaValue.value = ''; emit(BentoTextareaEvent.CLEAR); emitValue(''); }; const onInput = (event: InputEvent) => { event.stopImmediatePropagation(); if (!props.disabled && !isReadOnly.value) { textareaValue.value = (event.target as HTMLInputElement).value; /** * Triggered when input value is changed * * @event input * @property {String} inputValue - the updated textarea value */ emitValue(textareaValue.value); } }; const onBlur = () => { textareaElement.value.scrollTop = 0; emit(BentoTextareaEvent.BLUR); }; const onFocus = () => { textareaElement.value.focus(); emit(BentoTextareaEvent.FOCUS); }; const onChange = () => { emit(BentoTextareaEvent.CHANGE); }; const onPressEscape = () => { emit(BentoTextareaEvent.ESCAPE_PRESSED); }; const onKeyDown = (event: KeyboardEvent) => { event.stopPropagation(); emit(BentoTextareaEvent.KEYDOWN, event); }; const onKeyUp = (event: KeyboardEvent) => { event.stopPropagation(); emit(BentoTextareaEvent.KEYUP, event); }; const onMouseDown = () => { isUserResizing.value = true; }; const onMouseUp = () => { isUserResizing.value = false; }; /** * Updates the textarea width depending if the container or the user update its size. * @param isTextareaElement - sets to true if the element being observed is the textarea HTML element. */ const resizeTextareaWrapper = (isTextareaElement = false) => { // Width assigned by the browser whenever the textarea is manually resized. String of the format `<value>px`. const textareaStyleWidth = textareaElement.value.style.width; // Make sure the tracked textareaHeight is always in sync with the height size in case we manually resize the textarea if (textareaElement.value.style.height) { if (isUserResizing.value) { userSetHeight.value = parseInt(textareaElement.value.style.height, 10); } textareaHeight.value = textareaElement.value.style.height; } // If the textarea element observer is being triggered, but there's no textareaStyleWidth, we want to ignore it, as no manual resize as happened yet // The component wrapper will handle the resizing logic instead if (isTextareaElement && !textareaStyleWidth) { return; } // Width of the whole bento-textarea component const textareaComponentWidth = textareaComponent?.value?.offsetWidth; // If there is no textareaStyleWidth or the textareaStyleWidth is larger than the component container, the wrapper should be 100% of the container if (!textareaStyleWidth || parseInt(textareaStyleWidth, 10) > textareaComponentWidth) { textareaWrapperWidth.value = '100%'; } else { // Else the wrapper should always be as wide as the textarea element itself textareaWrapperWidth.value = textareaStyleWidth; } }; const focus = () => { textareaElement.value.focus(); }; defineExpose({ focus, }); onMounted(() => { textareaElementObserver = observeSizeOfElement(textareaElement.value, () => { resizeTextareaWrapper(true); }); textareaComponentObserver = observeSizeOfElement(textareaComponent.value, () => { resizeTextareaWrapper(); }); if (isDynamicHeight.value) { calculateHeight(); } if (props.value) { deprecate( 'BentoTextarea "value" property', `The use of "value" prop in "BentoTextarea" is no longer supported. Use the "v-model" or "model-value" property instead.`, '2.0.0' ); } }); onUnmounted(() => { textareaElementObserver?.disconnect(); textareaComponentObserver?.disconnect(); }); </script> <script lang="ts"> const TEXTAREA_BORDER_WIDTH = parseFloat(BBorderWidthAttention); export default { i18n: { messages }, name: 'bento-textarea', model: { prop: 'modelValue' }, }; </script> <style lang="scss" scoped src="./textarea.scss" /> 
+<template> <div ref="textareaComponent" class="b-textarea" :class="conditionalClasses"> <div :style="{ width: textareaWrapperWidth }"> <div class="b-textarea__label-box" :class="conditionalClassesLabelBox"> <field-label v-if="label" :for="textareaId" :label="label" :tooltip-text="tooltipText" :optional="optional" :required="required" /> <bento-typography v-if="characterLimit" el="span" class="b-textarea__label-item" :class="conditionalClassesLabelItem" > {{ counter }} </bento-typography> </div> <bento-typography el="div" class="b-textarea__input-box" :aria-disabled="disabled"> <textarea :id="textareaId" ref="textareaElement" :value="textareaValue" class="b-textarea__input" :class="conditionalClassesInput" :aria-label="computedAriaLabel" :aria-invalid="invalidInput" :readonly="isReadOnly" :required="required" :aria-required="required" :disabled="disabled" :placeholder="placeholder" :style="{ resize: resizable, height: textareaHeight }" @blur="onBlur" @change="onChange" @focus="onFocus" @input="onInput" @keydown.esc="onPressEscape" @keydown="onKeyDown" @keyup="onKeyUp" @mousedown="onMouseDown" @mouseup="onMouseUp" > </textarea> <div v-if="showClearButton" class="b-textarea__clear-button"> <bento-button variant="tertiary" :disabled="disabled" @click="onClear" @keypress.enter="onClear" @keyup.space="onClear" > <template #iconLeft> <cross-circle-fill-small-icon :svg-title="t('clearText')" /> </template> </bento-button> </div> </bento-typography> <error-message v-if="isOverCharacterLimit" :error-message="counterErrorText" /> <error-message v-if="errorMessage" :error-message="errorMessage" /> <bento-typography v-if="description" class="b-textarea__description" el="span"> {{ description }} </bento-typography> </div> </div> </template> <script setup lang="ts"> import { computed, nextTick, onMounted, onUnmounted, ref, toRef, toRefs, useAttrs, watch } from 'vue'; // Components import { BentoButton } from '@/components/button'; import { BentoTypography } from '@/components/typography'; import { ErrorMessage, FieldLabel } from '@/internal'; import CrossCircleFillSmallIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill-small'; // Utils import { generateUid } from '@/core/utils/ts'; import { observeSizeOfElement } from '@/utils/ts/resize'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { useI18n } from '@/utils/ts/i18n'; import { deprecate } from '@/utils/ts/deprecate'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; // Composables import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading'; // Constants import { BBorderWidthAttention } from '@adyen/bento-design-tokens/dist/js/bento/es6'; // Types import { BentoTextareaEvent, type BentoTextareaProps, BentoTextareaStateClass } from './textarea.types'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const attrs = useAttrs(); const props = withDefaults(defineProps<BentoTextareaProps>(), { ariaLabel: undefined, characterLimit: undefined, description: '', disabled: false, clearable: false, errorMessage: '', height: null, label: '', optional: false, placeholder: '', readonly: false, resizable: 'both', required: false, tooltipText: null, value: '', modelValue: '', }); const emit = defineEmits<{ /** * Emitted when the element has lost focus */ (e: BentoTextareaEvent.BLUR): void; /** * Emitted when the user modifies the element's value. Unlike the 'input' event, the change event is not necessarily fired for each alteration to an element's value */ (e: BentoTextareaEvent.CHANGE): void; /** * Emitted when the "Clear" button was clicked */ (e: BentoTextareaEvent.CLEAR): void; /** * Emitted when the "ESC" key is pressed */ (e: BentoTextareaEvent.ESCAPE_PRESSED): void; /** * Emitted when the element has received focus */ (e: BentoTextareaEvent.FOCUS): void; /** * Emitted when the component's model changes * * @deprecated since version 2.0. Use `v-model` or `update:model-value` instead. * */ (e: BentoTextareaEvent.INPUT, value: string): void; /** * Emitted when the component's model changes */ (e: BentoTextareaEvent.UPDATE_MODEL_VALUE, value: string): void; /** * Emitted when the text area keydown event is fired */ (e: BentoTextareaEvent.KEYDOWN, event: KeyboardEvent): void; /** * Emitted when the text area keyup event is fired */ (e: BentoTextareaEvent.KEYUP, event: KeyboardEvent): void; }>(); const { height } = toRefs(props); const textareaId = generateUid('textarea'); const textareaElement = ref<HTMLTextAreaElement>(null); const textareaComponent = ref<HTMLDivElement>(null); const textareaValue = ref(props.modelValue || props.value); const defaultTextareaHeight = 44; const textareaHeight = ref(props.height || `${defaultTextareaHeight}px`); const userSetHeight = ref<number>(0); const textareaWrapperWidth = ref('100%'); // The width set to the wrapper of the label, textarea and description const isUserResizing = ref(false); let textareaElementObserver: ResizeObserver | null = null; let textareaComponentObserver: ResizeObserver | null = null; const { t, n } = useI18n<{ message: MessageSchema }>({ messages }); const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly')); const { emitValue } = useFormFieldEmits<string>(emit); const counter = computed(() => `${n(textareaValue?.value?.length ?? 0)} / ${n(props.characterLimit)}`); const isDynamicHeight = computed(() => !height.value); const isOverCharacterLimit = computed( () => props.characterLimit && textareaValue.value.length > props.characterLimit ); /** * Calculates and sets the height of the textarea. * The height is determined by the maximum of the following values: * * 1. The content's scroll height (with a minimum of `defaultTextareaHeight`) + the border width. * 2. The height set by the user manually resizing the textarea (`userSetHeight`). * 3. The default minimum height (`defaultTextareaHeight`). * * This ensures the textarea grows with content, shrinks when content is removed, * but never goes below the manually set height or the default height. */ const calculateHeight = () => { if (textareaElement.value) { const newHeight = Math.max( textareaElement.value.scrollHeight <= defaultTextareaHeight ? defaultTextareaHeight : textareaElement.value.scrollHeight + TEXTAREA_BORDER_WIDTH * 2, userSetHeight.value, defaultTextareaHeight ); textareaHeight.value = `${newHeight}px`; } }; watch(height, () => { if (isDynamicHeight.value) { calculateHeight(); } else { textareaHeight.value = height.value; } }); watch( () => [props.value, props.modelValue], () => { textareaValue.value = props.modelValue || props.value; }, { immediate: true } ); watch( () => textareaValue.value, async () => { if (isDynamicHeight.value) { // Hack to make the textarea calculate its height properly // Set the textarea back to the original value before calculating the height textareaHeight.value = `${defaultTextareaHeight}px`; if (!textareaValue.value) { return; } await nextTick(); calculateHeight(); } }, { immediate: true } ); const invalidInput = computed(() => !!props.errorMessage || isOverCharacterLimit.value); const conditionalClasses = computed(() => ({ [`b-textarea--${BentoTextareaStateClass.DISABLED}`]: props.disabled, })); const conditionalClassesInput = computed(() => ({ [`b-textarea__input--${BentoTextareaStateClass.CLEARABLE}`]: props.clearable, [`b-textarea__input--${BentoTextareaStateClass.READONLY}`]: isReadOnly.value, [`b-textarea__input--${BentoTextareaStateClass.ERROR}`]: invalidInput.value, [`b-textarea__input--dynamic-height`]: isDynamicHeight.value, })); const conditionalClassesLabelBox = computed(() => ({ [`b-textarea__label-box--no-label`]: !props.label, })); const conditionalClassesLabelItem = computed(() => ({ [`b-textarea__label-item--${BentoTextareaStateClass.ERROR}`]: isOverCharacterLimit.value, })); const counterErrorText = computed(() => t('yourTextCanBenAtMost', { characterLimit: props.characterLimit })); const ariaLabelAttribute = ref(attrs['aria-label']); const { ariaLabel, label } = toRefs(props); const computedAriaLabel = useAriaLabel({ ariaLabel: ariaLabelAttribute.value as string, // TODO: take this line away when the aria-label props is removed label: ariaLabel, defaultFallback: label, }); const showClearButton = computed( () => props.clearable && textareaValue.value && !props.disabled && !isReadOnly.value ); const onClear = () => { textareaValue.value = ''; emit(BentoTextareaEvent.CLEAR); emitValue(''); }; const onInput = (event: InputEvent) => { event.stopImmediatePropagation(); if (!props.disabled && !isReadOnly.value) { textareaValue.value = (event.target as HTMLInputElement).value; /** * Triggered when input value is changed * * @event input * @property {String} inputValue - the updated textarea value */ emitValue(textareaValue.value); } }; const onBlur = () => { textareaElement.value.scrollTop = 0; emit(BentoTextareaEvent.BLUR); }; const onFocus = () => { textareaElement.value.focus(); emit(BentoTextareaEvent.FOCUS); }; const onChange = () => { emit(BentoTextareaEvent.CHANGE); }; const onPressEscape = () => { emit(BentoTextareaEvent.ESCAPE_PRESSED); }; const onKeyDown = (event: KeyboardEvent) => { event.stopPropagation(); emit(BentoTextareaEvent.KEYDOWN, event); }; const onKeyUp = (event: KeyboardEvent) => { event.stopPropagation(); emit(BentoTextareaEvent.KEYUP, event); }; const onMouseDown = () => { isUserResizing.value = true; }; const onMouseUp = () => { isUserResizing.value = false; }; /** * Updates the textarea width depending if the container or the user update its size. * @param isTextareaElement - sets to true if the element being observed is the textarea HTML element. */ const resizeTextareaWrapper = (isTextareaElement = false) => { // Width assigned by the browser whenever the textarea is manually resized. String of the format `<value>px`. const textareaStyleWidth = textareaElement.value.style.width; // Make sure the tracked textareaHeight is always in sync with the height size in case we manually resize the textarea if (textareaElement.value.style.height) { if (isUserResizing.value) { userSetHeight.value = parseInt(textareaElement.value.style.height, 10); } textareaHeight.value = textareaElement.value.style.height; } // If the textarea element observer is being triggered, but there's no textareaStyleWidth, we want to ignore it, as no manual resize as happened yet // The component wrapper will handle the resizing logic instead if (isTextareaElement && !textareaStyleWidth) { return; } // Width of the whole bento-textarea component const textareaComponentWidth = textareaComponent?.value?.offsetWidth; // If there is no textareaStyleWidth or the textareaStyleWidth is larger than the component container, the wrapper should be 100% of the container if (!textareaStyleWidth || parseInt(textareaStyleWidth, 10) > textareaComponentWidth) { textareaWrapperWidth.value = '100%'; } else { // Else the wrapper should always be as wide as the textarea element itself textareaWrapperWidth.value = textareaStyleWidth; } }; const focus = () => { textareaElement.value.focus(); }; defineExpose({ focus, }); onMounted(() => { textareaElementObserver = observeSizeOfElement(textareaElement.value, () => { resizeTextareaWrapper(true); }); textareaComponentObserver = observeSizeOfElement(textareaComponent.value, () => { resizeTextareaWrapper(); }); if (isDynamicHeight.value) { calculateHeight(); } if (props.value) { deprecate( 'BentoTextarea "value" property', `The use of "value" prop in "BentoTextarea" is no longer supported. Use the "v-model" or "model-value" property instead.`, '2.0.0' ); } }); onUnmounted(() => { textareaElementObserver?.disconnect(); textareaComponentObserver?.disconnect(); }); </script> <script lang="ts"> const TEXTAREA_BORDER_WIDTH = parseFloat(BBorderWidthAttention); export default { i18n: { messages }, name: 'bento-textarea', model: { prop: 'modelValue' }, }; </script> <style lang="scss" scoped src="./textarea.scss" />