@adyen/bento-mcp 0.11.0 → 0.12.0

package/dist/assets/components/table-of-contents/table-of-contents.stories.ts

@@ -1 +1 @@
-import { isVue2 } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { computed, ref } from 'vue'; import type { Meta, StoryObj } from '@storybook/vue'; import BentoTableOfContents from './table-of-contents.vue'; import TableOfContentsDefaultExample from './__tests__/table-of-contents-default-example.vue?raw'; import BentoTypography from '../typography/typography.vue'; import './table-of-contents.stories.scss?module'; const meta: Meta = { title: 'Table of Contents', component: BentoTableOfContents, }; export default meta; type Story = StoryObj<typeof BentoTableOfContents>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoTableOfContents, BentoTypography }, props: Object.keys(argTypes), template: ` <div class="b-toc-story"> <div class="b-toc-story__layout"> <div class="b-toc-story__sidebar"> <div class="b-toc-story__sidebar-inner"> <bento-table-of-contents :active-index="args.activeIndex" :items="sections" :scroll-offset="args.scrollOffset" :title="args.title" /> </div> </div> <div class="b-toc-story__content"> <section ref="section1" id="section-1" class="b-toc-story__section b-toc-story__section--medium" > <bento-typography el="h2" variant="title">Section 1</bento-typography> <bento-typography>This is the content for the first section.</bento-typography> </section> <section ref="section2" id="section-2" class="b-toc-story__section" > <bento-typography el="h2" variant="title">Section 2</bento-typography> <bento-typography>This section is shorter.</bento-typography> </section> <section ref="section21" id="section-2-1" class="b-toc-story__section" > <bento-typography el="h2" variant="title">Section 2.1</bento-typography> <bento-typography>This is nested under Section 2.</bento-typography> </section> <section ref="section22" id="section-2-2" class="b-toc-story__section" > <bento-typography el="h2" variant="title">Section 2.2</bento-typography> <bento-typography>This is another level 2 section.</bento-typography> </section> <section ref="section211" id="section-2-1-1" class="b-toc-story__section" > <bento-typography el="h2" variant="title">Section 2.1.1</bento-typography> <bento-typography>This is nested under Section 2.1.</bento-typography> </section> <section ref="section2111" id="section-2-1-1-1" class="b-toc-story__section" > <bento-typography el="h2" variant="title">Section 2.1.1.1</bento-typography> <bento-typography>This is nested under Section 2.1.1.</bento-typography> </section> <section ref="section212" id="section-2-1-2" class="b-toc-story__section" > <bento-typography el="h2" variant="title">Section 2.1.2</bento-typography> <bento-typography>This is another level 3 section.</bento-typography> </section> <section ref="section3" id="section-3" class="b-toc-story__section b-toc-story__section--large" > <bento-typography el="h2" variant="title">Section 3</bento-typography> <bento-typography>This is a tall section to demonstrate scrolling.</bento-typography> </section> </div> </div> </div> `, setup(props) { const args = isVue2 ? props : _args; const section1 = ref(null); const section2 = ref(null); const section21 = ref(null); const section22 = ref(null); const section211 = ref(null); const section2111 = ref(null); const section212 = ref(null); const section3 = ref(null); const sections = computed(() => [ { title: 'Section 1', elementRef: section1, level: 1 }, { title: 'Section 2', elementRef: section2, level: 1 }, { title: 'Section 2.1', elementRef: section21, level: 2 }, { title: 'Section 2.2', elementRef: section22, level: 2 }, { title: 'Section 2.1.1', elementRef: section211, level: 3 }, { title: 'Section 2.1.1.1', elementRef: section2111, level: 4 }, { title: 'Section 2.1.2', elementRef: section212, level: 3 }, { title: 'Section 3', elementRef: section3, level: 1 }, ]); return { args, section1, section2, section21, section22, section211, section2111, section212, section3, sections, }; }, }), args: { scrollOffset: 8, }, parameters: storybookDocsParameter(TableOfContentsDefaultExample), }; 
+import { isVue2 } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { computed, ref } from 'vue'; import type { Meta, StoryObj } from '@storybook/vue'; import BentoTableOfContents from './table-of-contents.vue'; const TableOfContentsDefaultExample = "<template>\n <div class=\"b-table-of-contents-default-example\">\n <div class=\"b-table-of-contents-default-example__toc-holder\">\n <bento-table-of-contents :items=\"sections\" />\n </div>\n <div>\n <section id=\"section1\" ref=\"section1Ref\"> Section 1 content </section>\n <section id=\"section2\" ref=\"section2Ref\"> Section 2 content </section>\n <section id=\"section2-1\" ref=\"section21Ref\"> Section 2.1 content </section>\n <section id=\"section2-2\" ref=\"section22Ref\"> Section 2.2 content </section>\n <section id=\"section2-1-1\" ref=\"section211Ref\"> Section 2.1.1 content </section>\n <section id=\"section2-1-1-1\" ref=\"section2111Ref\"> Section 2.1.1.1 content </section>\n <section id=\"section2-1-2\" ref=\"section212Ref\"> Section 2.1.2 content </section>\n <section id=\"section3\" ref=\"section3Ref\"> Section 3 content </section>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoTableOfContents } from '@adyen/bento-vue2';\n import { computed, ref } from 'vue';\n\n const section1Ref = ref(null);\n const section2Ref = ref(null);\n const section21Ref = ref(null);\n const section22Ref = ref(null);\n const section211Ref = ref(null);\n const section2111Ref = ref(null);\n const section212Ref = ref(null);\n const section3Ref = ref(null);\n const sections = computed(() => [\n { title: 'Section 1', elementRef: section1Ref, level: 1 },\n { title: 'Section 2', elementRef: section2Ref, level: 1 },\n { title: 'Section 2.1', elementRef: section21Ref, level: 2 },\n { title: 'Section 2.2', elementRef: section22Ref, level: 2 },\n { title: 'Section 2.1.1', elementRef: section211Ref, level: 3 },\n { title: 'Section 2.1.1.1', elementRef: section2111Ref, level: 4 },\n { title: 'Section 2.1.2', elementRef: section212Ref, level: 3 },\n { title: 'Section 3', elementRef: section3Ref, level: 1 },\n ]);\n</script>\n\n<style lang=\"scss\" scoped>\n .b-table-of-contents-default-example {\n display: grid;\n grid-template-columns: auto;\n position: relative;\n\n @media (min-width: 376px) {\n grid-template-columns: 170px auto;\n\n &__toc-holder {\n position: sticky;\n top: var(--b-spacer-120);\n }\n }\n\n section {\n min-height: 640px;\n padding-top: var(--b-spacer-120);\n }\n }\n</style>\n"; import BentoTypography from '../typography/typography.vue'; import './table-of-contents.stories.scss?module'; const meta: Meta = { title: 'Table of Contents', component: BentoTableOfContents, }; export default meta; type Story = StoryObj<typeof BentoTableOfContents>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoTableOfContents, BentoTypography }, props: Object.keys(argTypes), template: ` <div class="b-toc-story"> <div class="b-toc-story__layout"> <div class="b-toc-story__sidebar"> <div class="b-toc-story__sidebar-inner"> <bento-table-of-contents :active-index="args.activeIndex" :items="sections" :scroll-offset="args.scrollOffset" :title="args.title" /> </div> </div> <div class="b-toc-story__content"> <section ref="section1" id="section-1" class="b-toc-story__section b-toc-story__section--medium" > <bento-typography el="h2" variant="title">Section 1</bento-typography> <bento-typography>This is the content for the first section.</bento-typography> </section> <section ref="section2" id="section-2" class="b-toc-story__section" > <bento-typography el="h2" variant="title">Section 2</bento-typography> <bento-typography>This section is shorter.</bento-typography> </section> <section ref="section21" id="section-2-1" class="b-toc-story__section" > <bento-typography el="h2" variant="title">Section 2.1</bento-typography> <bento-typography>This is nested under Section 2.</bento-typography> </section> <section ref="section22" id="section-2-2" class="b-toc-story__section" > <bento-typography el="h2" variant="title">Section 2.2</bento-typography> <bento-typography>This is another level 2 section.</bento-typography> </section> <section ref="section211" id="section-2-1-1" class="b-toc-story__section" > <bento-typography el="h2" variant="title">Section 2.1.1</bento-typography> <bento-typography>This is nested under Section 2.1.</bento-typography> </section> <section ref="section2111" id="section-2-1-1-1" class="b-toc-story__section" > <bento-typography el="h2" variant="title">Section 2.1.1.1</bento-typography> <bento-typography>This is nested under Section 2.1.1.</bento-typography> </section> <section ref="section212" id="section-2-1-2" class="b-toc-story__section" > <bento-typography el="h2" variant="title">Section 2.1.2</bento-typography> <bento-typography>This is another level 3 section.</bento-typography> </section> <section ref="section3" id="section-3" class="b-toc-story__section b-toc-story__section--large" > <bento-typography el="h2" variant="title">Section 3</bento-typography> <bento-typography>This is a tall section to demonstrate scrolling.</bento-typography> </section> </div> </div> </div> `, setup(props) { const args = isVue2 ? props : _args; const section1 = ref(null); const section2 = ref(null); const section21 = ref(null); const section22 = ref(null); const section211 = ref(null); const section2111 = ref(null); const section212 = ref(null); const section3 = ref(null); const sections = computed(() => [ { title: 'Section 1', elementRef: section1, level: 1 }, { title: 'Section 2', elementRef: section2, level: 1 }, { title: 'Section 2.1', elementRef: section21, level: 2 }, { title: 'Section 2.2', elementRef: section22, level: 2 }, { title: 'Section 2.1.1', elementRef: section211, level: 3 }, { title: 'Section 2.1.1.1', elementRef: section2111, level: 4 }, { title: 'Section 2.1.2', elementRef: section212, level: 3 }, { title: 'Section 3', elementRef: section3, level: 1 }, ]); return { args, section1, section2, section21, section22, section211, section2111, section212, section3, sections, }; }, }), args: { scrollOffset: 8, }, parameters: storybookDocsParameter(TableOfContentsDefaultExample), }; 

package/dist/assets/components/table-of-contents/table-of-contents.types.ts

@@ -1 +1 @@
-import { type SectionNavigationItem } from '@/types/section-navigation'; export type BentoTableOfContentsItem = SectionNavigationItem; export type BentoTableOfContentsItems = Array<BentoTableOfContentsItem>; export interface BentoTableOfContentsProps { /** * An array containing all the items in the table of contents. */ items: BentoTableOfContentsItems; /** * The index of the currently active item. Can be used to programmatically set the active item. * @default undefined */ activeIndex?: number; /** * Offset in pixels applied before scrolling to a section. * @default undefined */ scrollOffset?: number; /** * Table of contents title. Defaults to the translated "On this page" label. * @default undefined */ title?: string; } export enum TableOfContentsClass { ACTIVE = 'active', } 
+import { type SectionNavigationItem } from '@/types/section-navigation'; export type BentoTableOfContentsItem = SectionNavigationItem; export type BentoTableOfContentsItems = Array<BentoTableOfContentsItem>; export interface BentoTableOfContentsProps { /** * An array containing all the items in the table of contents. */ items: BentoTableOfContentsItems; /** * The index of the currently active item. Can be used to programmatically set the active item. * @default undefined */ activeIndex?: number; /** * Offset in pixels applied before scrolling to a section. * @default undefined */ scrollOffset?: number; /** * Table of contents title. Defaults to the translated "On this page" label. * @default undefined */ title?: string; } 

package/dist/assets/components/table-of-contents/table-of-contents.vue

@@ -1 +1 @@
-<template> <nav class="b-table-of-contents" :aria-labelledby="titleId"> <bento-typography :id="titleId" el="h2" variant="body" stronger class="b-table-of-contents__header">{{ computedTitle }}</bento-typography> <table-of-contents-list :items="items" :active-section-href="activeSectionHref" :initial-focus-index="controlledActiveIndex" :scroll-offset="scrollOffset" /> </nav> </template> <script setup lang="ts"> import { computed } from 'vue'; import { BentoTypography } from '@/components/typography'; import { TableOfContentsList } from './components'; import { generateUid } from '@/core/utils/ts'; import { useScrollSpy } from '@/composables/use-scroll-spy'; import { getElementFragmentHref, type ScrollToSectionTarget } from '@/utils/ts/scroll-to-section'; import { unrefElement } from '@/directives/click-outside/utils'; import { useI18n } from '@/utils/ts/i18n'; import messages from './messages.json'; import type { BentoTableOfContentsItem, BentoTableOfContentsProps } from './table-of-contents.types'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const props = withDefaults(defineProps<BentoTableOfContentsProps>(), { activeIndex: undefined, scrollOffset: undefined, title: undefined, }); const titleId = generateUid('table-of-contents-title'); const computedTitle = computed(() => props.title ?? t('onThisPage')); const resolvedItems = computed(() => props.items .map((item, originalIndex) => ({ element: unrefElement(item.elementRef), originalIndex, })) .filter((item): item is { element: Element; originalIndex: number } => !!item.element) ); const sectionTargetElements = computed(() => resolvedItems.value.map(item => item.element)); const controlledActiveIndex = computed(() => props.activeIndex ?? -1); const scrollSpyDefaultIndex = computed(() => props.activeIndex === undefined ? -1 : resolvedItems.value.findIndex(({ originalIndex }) => originalIndex === props.activeIndex) ); const getSectionFragmentHref = (elementRef?: BentoTableOfContentsItem['elementRef']) => getElementFragmentHref(elementRef as ScrollToSectionTarget); const { activeIndex: scrollSpyActiveIndex } = useScrollSpy(sectionTargetElements, { default: scrollSpyDefaultIndex, debounce: 300, }); const currentActiveIndex = computed(() => { if (props.activeIndex !== undefined) { return props.activeIndex; } return resolvedItems.value[scrollSpyActiveIndex.value]?.originalIndex ?? -1; }); const activeSectionHref = computed(() => getSectionFragmentHref(props.items[currentActiveIndex.value]?.elementRef)); </script> <script lang="ts"> /** * This is a navigational component that serves as a list outlining * the structure and hierarchy of content on a page. It allows users * to find the content in a page more quickly with anchor links in * the content. * * ARIA: https://www.w3.org/TR/dpub-aria-1.1/#doc-toc * * @usage * import { BentoTableOfContents } from '@adyen/bento-vue2'; * * export default { * components: { BentoTableOfContents }, * template: ` * <bento-table-of-contents * :items="[{ title: 'Section text', elementRef: sectionRef }]" * /> * `, * setup() { * const sectionRef = ref(null); * return { * sectionRef, * } * } * } */ export default { name: 'bento-table-of-contents', i18n: { messages }, }; </script> <style lang="scss" scoped src="./table-of-contents.scss" /> 
+<template> <nav class="b-table-of-contents" :aria-labelledby="titleId"> <bento-typography :id="titleId" el="h2" variant="body" stronger class="b-table-of-contents__header">{{ computedTitle }}</bento-typography> <table-of-contents-list :items="items" :active-section-href="activeSectionHref" :initial-focus-index="controlledActiveIndex" :scroll-offset="scrollOffset" /> </nav> </template> <script setup lang="ts"> import { computed } from 'vue'; import { BentoTypography } from '@/components/typography'; import { TableOfContentsList } from './components'; import { generateUid } from '@/utils/ts/generate-uid'; import { useScrollSpy } from '@/composables/use-scroll-spy'; import { getElementFragmentHref, type ScrollToSectionTarget } from '@/utils/ts/scroll-to-section'; import { unrefElement } from '@/directives/click-outside/utils'; import { useI18n } from '@/utils/ts/i18n'; import messages from './messages.json'; import type { BentoTableOfContentsItem, BentoTableOfContentsProps } from './table-of-contents.types'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const props = withDefaults(defineProps<BentoTableOfContentsProps>(), { activeIndex: undefined, scrollOffset: undefined, title: undefined, }); const titleId = generateUid('table-of-contents-title'); const computedTitle = computed(() => props.title ?? t('onThisPage')); const resolvedItems = computed(() => props.items .map((item, originalIndex) => ({ element: unrefElement(item.elementRef), originalIndex, })) .filter((item): item is { element: Element; originalIndex: number } => !!item.element) ); const sectionTargetElements = computed(() => resolvedItems.value.map(item => item.element)); const controlledActiveIndex = computed(() => props.activeIndex ?? -1); const scrollSpyDefaultIndex = computed(() => props.activeIndex === undefined ? -1 : resolvedItems.value.findIndex(({ originalIndex }) => originalIndex === props.activeIndex) ); const getSectionFragmentHref = (elementRef?: BentoTableOfContentsItem['elementRef']) => getElementFragmentHref(elementRef as ScrollToSectionTarget); const { activeIndex: scrollSpyActiveIndex } = useScrollSpy(sectionTargetElements, { default: scrollSpyDefaultIndex, debounce: 300, }); const currentActiveIndex = computed(() => { if (props.activeIndex !== undefined) { return props.activeIndex; } return resolvedItems.value[scrollSpyActiveIndex.value]?.originalIndex ?? -1; }); const activeSectionHref = computed(() => getSectionFragmentHref(props.items[currentActiveIndex.value]?.elementRef)); </script> <script lang="ts"> /** * This is a navigational component that serves as a list outlining * the structure and hierarchy of content on a page. It allows users * to find the content in a page more quickly with anchor links in * the content. * * ARIA: https://www.w3.org/TR/dpub-aria-1.1/#doc-toc * * @usage * import { BentoTableOfContents } from '@adyen/bento-vue2'; * * export default { * components: { BentoTableOfContents }, * template: ` * <bento-table-of-contents * :items="[{ title: 'Section text', elementRef: sectionRef }]" * /> * `, * setup() { * const sectionRef = ref(null); * return { * sectionRef, * } * } * } */ export default { name: 'bento-table-of-contents', i18n: { messages }, }; </script> <style lang="scss" scoped src="./table-of-contents.scss" /> 

package/dist/assets/components/tabs/components/tab.internal.types.ts

@@ -0,0 +1 @@
+import { type Ref } from 'vue'; import { type MaybeRef } from '@/types/maybe-ref'; import type { BentoTabProps } from './tab.types'; export interface BentoTab { counter: Ref<number>; disabled: Ref<boolean>; errorCounter: Ref<number>; hidden: Ref<boolean>; id: string; title: MaybeRef<string>; withNotificationIndicator: Ref<boolean>; setElementRef: BentoTabProps['setElementRef']; } export type BentoTabProvidedTitle = (value: string) => void; 

package/dist/assets/components/tabs/components/tab.types.ts

@@ -1 +1 @@
-import { type Ref } from 'vue'; import { type MaybeRef } from '@/types/maybe-ref'; /** * Public */ export interface BentoTabProps { /** * Displays a counter next to the tab title */ counter?: number; /** * Determines whether the tab is disabled */ disabled?: boolean; /** * Displays a counter with an error icon next to the tab title */ errorCounter?: number; /** * Prevents a tab from being displayed. * Use `hidden` instead of `v-show`. */ hidden?: boolean; /** * Title of the tab */ title: string; /** * Displays the tab with a notification indicator */ withNotificationIndicator?: boolean; /** * Callback function to safely capture the underlying DOM element of the tab. * Useful for anchoring tooltips, popovers, or tutorials. * * @example * // 1. Define your ref and setter in setup() * const tabNode = ref<Element | null>(null); * const setTabNode = (el: Element | null) => { tabNode.value = el; }; * * // 2. Pass the setter to the tab * <bento-tab :set-element-ref="setTabNode"> */ setElementRef?: (el: Element | null) => void; } /** * Private */ export interface BentoTab { counter: Ref<number>; disabled: Ref<boolean>; errorCounter: Ref<number>; hidden: Ref<boolean>; id: string; title: MaybeRef<string>; withNotificationIndicator: Ref<boolean>; setElementRef: BentoTabProps['setElementRef']; } export type BentoTabProvidedTitle = (value: string) => void; 
+export interface BentoTabProps { /** * Displays a counter next to the tab title */ counter?: number; /** * Determines whether the tab is disabled */ disabled?: boolean; /** * Displays a counter with an error icon next to the tab title */ errorCounter?: number; /** * Prevents a tab from being displayed. * Use `hidden` instead of `v-show`. */ hidden?: boolean; /** * Title of the tab */ title: string; /** * Displays the tab with a notification indicator */ withNotificationIndicator?: boolean; /** * Callback function to safely capture the underlying DOM element of the tab. * Useful for anchoring tooltips, popovers, or tutorials. * * @example * // 1. Define your ref and setter in setup() * const tabNode = ref<Element | null>(null); * const setTabNode = (el: Element | null) => { tabNode.value = el; }; * * // 2. Pass the setter to the tab * <bento-tab :set-element-ref="setTabNode"> */ setElementRef?: (el: Element | null) => void; } 

package/dist/assets/components/tabs/components/tab.vue

@@ -1 +1 @@
-<template> <div v-show="activeTabId === id" :id="`${id}-tabpanel`" class="b-tab" role="tabpanel" :aria-labelledby="id"> <template v-if="activeTabId === id"> <slot /> </template> </div> </template> <script setup lang="ts"> import { computed, inject, onUnmounted, provide, ref, toRefs } from 'vue'; import { EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY, TABS_ACTIVE_TAB_ID_KEY, TABS_REGISTER_TAB_INJECTION_KEY, } from '../tabs.keys'; import { type BentoTabsRegisterTab } from '../tabs.types'; import { type BentoTabProps, type BentoTabProvidedTitle } from './tab.types'; const props = withDefaults(defineProps<BentoTabProps>(), { counter: null, disabled: false, errorCounter: null, hidden: false, withNotificationIndicator: false, setElementRef: undefined, }); // External title injection const { counter, disabled, errorCounter, hidden, withNotificationIndicator } = toRefs(props); const componentTitle = ref<BentoTabProps['title']>(); const setTitle: BentoTabProvidedTitle = (value: string) => { componentTitle.value = value; }; provide(EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY, setTitle); const computedTitle = computed<BentoTabProps['title']>(() => componentTitle.value ?? props.title); const registerTab: BentoTabsRegisterTab = inject(TABS_REGISTER_TAB_INJECTION_KEY); const activeTabId = inject(TABS_ACTIVE_TAB_ID_KEY); const { id, unregisterTab } = registerTab({ counter, disabled, errorCounter, hidden, title: computedTitle, withNotificationIndicator, setElementRef: props.setElementRef, }); onUnmounted(() => unregisterTab()); </script> <script lang="ts"> /** * Tab content which attaches a tab to the `bento-tabs` component * and renders is content when it becomes active. * * @example * import { BentoTab, BentoTabs } from '@adyen/bento-vue2'; * * <template> * <bento-tabs> * <bento-tab * :counter="1" * :disabled="false" * :hidden="false" * title="Tab's title" * with-notification-indicator * > * Tab content * </bento-tab> * </bento-tabs> * </template> */ export default { name: 'bento-tab', }; </script> <style lang="scss" scoped src="./tab.scss" /> 
+<template> <div v-show="activeTabId === id" :id="`${id}-tabpanel`" class="b-tab" role="tabpanel" :aria-labelledby="id"> <template v-if="activeTabId === id"> <slot /> </template> </div> </template> <script setup lang="ts"> import { computed, inject, onUnmounted, provide, ref, toRefs } from 'vue'; import { EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY, TABS_ACTIVE_TAB_ID_KEY, TABS_REGISTER_TAB_INJECTION_KEY, } from '../tabs.keys'; import { type BentoTabsRegisterTab } from '../tabs.types'; import { type BentoTabProps } from './tab.types'; import { type BentoTabProvidedTitle } from './tab.internal.types'; const props = withDefaults(defineProps<BentoTabProps>(), { counter: null, disabled: false, errorCounter: null, hidden: false, withNotificationIndicator: false, setElementRef: undefined, }); // External title injection const { counter, disabled, errorCounter, hidden, withNotificationIndicator } = toRefs(props); const componentTitle = ref<BentoTabProps['title']>(); const setTitle: BentoTabProvidedTitle = (value: string) => { componentTitle.value = value; }; provide(EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY, setTitle); const computedTitle = computed<BentoTabProps['title']>(() => componentTitle.value ?? props.title); const registerTab: BentoTabsRegisterTab = inject(TABS_REGISTER_TAB_INJECTION_KEY); const activeTabId = inject(TABS_ACTIVE_TAB_ID_KEY); const { id, unregisterTab } = registerTab({ counter, disabled, errorCounter, hidden, title: computedTitle, withNotificationIndicator, setElementRef: props.setElementRef, }); onUnmounted(() => unregisterTab()); </script> <script lang="ts"> /** * Tab content which attaches a tab to the `bento-tabs` component * and renders is content when it becomes active. * * @example * import { BentoTab, BentoTabs } from '@adyen/bento-vue2'; * * <template> * <bento-tabs> * <bento-tab * :counter="1" * :disabled="false" * :hidden="false" * title="Tab's title" * with-notification-indicator * > * Tab content * </bento-tab> * </bento-tabs> * </template> */ export default { name: 'bento-tab', }; </script> <style lang="scss" scoped src="./tab.scss" /> 

package/dist/assets/components/tabs/tabs.stories.ts

@@ -1 +1 @@
-import { isVue2 } from 'vue-demi'; import BentoTabs from './tabs.vue'; import BentoTab from './components/tab.vue'; import type { Meta, StoryObj } from '@storybook/vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import BentoTabsEverythingBagelExample from './__tests__/bento-tabs-everything-bagel-example.vue?raw'; const meta: Meta = { title: 'Tabs', component: BentoTabs, argTypes: { // Slots default: { name: 'default', type: { name: 'string', required: false }, description: 'Default slot content', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, }, }; export default meta; type Story = StoryObj<typeof BentoTabs>; const defaultCode = ` <template> <bento-tabs :activeTabIndex="activeTabIndex" @update:active-tab-index="onTabSelected"> <bento-tab title="Maria Ahlefeldt"> (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. </bento-tab> <bento-tab title="Carl Andersen"> (29 April 1847 - 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen. </bento-tab> <bento-tab title="Karl Truffel"> (1 March 1981 - 7 November 1992) was a Danish dog and commander born in Berlin, son of the machinist Tom Jahoor Truffel. </bento-tab> <bento-tab title="Maria Ahlefeldt" :disabled="true"> (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. </bento-tab> </bento-tabs> </template> <script setup lang="ts"> import { BentoTab, BentoTabs } from '@adyen/bento-vue2'; import { ref } from 'vue' const activeTabIndex = ref(1) const onTabSelected = (newActiveTabIndex: number) => { activeTabIndex.value = newActiveTabIndex; } </script> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoTabs, BentoTab }, props: Object.keys(argTypes), template: ` <bento-tabs v-bind="args"> <bento-tab title="Maria Ahlefeldt"> (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. </bento-tab> <bento-tab title="Carl Andersen"> (29 April 1847 - 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen. </bento-tab> <bento-tab title="Karl Truffel"> (1 March 1981 - 7 November 1992) was a Danish dog and commander born in Berlin, son of the machinist Tom Jahoor Truffel. </bento-tab> <bento-tab title="Maria Ahlefeldt" :disabled="true"> (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. </bento-tab> </bento-tabs> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), parameters: storybookDocsParameter(defaultCode), }; export const Sticky: Story = { render: (_args, { argTypes }) => ({ components: { BentoTabs, BentoTab }, props: Object.keys(argTypes), template: ` <bento-tabs v-bind="args"> <bento-tab title="Maria Ahlefeldt"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida dictum tellus vel semper. Maecenas id purus id massa sollicitudin lobortis sed at massa. Ut venenatis laoreet purus, ac sodales arcu facilisis vitae. Curabitur interdum quis nunc ac faucibus. Sed id dictum nibh, in dignissim augue. Mauris id convallis orci, ac ultrices nibh. Cras sollicitudin vitae tortor id aliquet. Sed vel interdum lectus. Sed nec augue non odio aliquet aliquam quis ut urna. Donec at tincidunt dolor, quis eleifend tellus. Nam ornare cursus ipsum, eu euismod dui hendrerit sed. Donec pulvinar ante a mattis gravida. Cras posuere magna nec lectus varius tincidunt. Suspendisse potenti. In congue, nibh vitae dapibus mollis, nibh erat dapibus magna, vel pretium risus nibh vitae nunc. Nunc ultricies iaculis erat, id accumsan tortor. Proin nec lacus quis arcu tempor cursus vitae et augue. Donec eget egestas est. Praesent pharetra aliquam justo id cursus. Suspendisse ut viverra dolor. Aliquam at rutrum enim, eget volutpat mi. Nunc ut pulvinar turpis. Aliquam porttitor mollis lacus et aliquam. Etiam ullamcorper ut nunc ac ultricies. Vestibulum congue ultrices dictum. Etiam volutpat, felis at fringilla luctus, turpis arcu varius dui, eget eleifend mi mauris nec nisl. Ut et elementum eros, a dapibus leo. Sed molestie lectus in dui consequat vehicula. Phasellus sodales odio et vestibulum consectetur. Maecenas sodales malesuada felis eget semper. Morbi et vestibulum arcu. Fusce ex massa, elementum at massa non, ultricies vestibulum elit. Pellentesque nec felis id quam vulputate dapibus id id dolor. Aenean facilisis nibh sed enim lacinia sodales. Cras viverra ac ipsum vitae commodo. Nulla quis congue ipsum. Nunc ultricies tristique fermentum. Fusce nec maximus nisl, id facilisis mauris. Duis nec maximus tellus. Fusce quis mauris posuere ex mollis faucibus viverra at leo. Donec ac neque fermentum, fringilla magna vel, scelerisque nisi. Nulla id vehicula lectus, ac gravida justo. Sed in lorem odio. Vivamus lacinia ipsum id nisi tincidunt mollis. Sed quis dui ut dolor tempus mattis id eu erat. Sed tempus arcu lectus, sit amet placerat dolor consequat sed. Maecenas fermentum, ligula eu luctus imperdiet, dolor nisi condimentum dolor, nec molestie justo dolor eu dolor. Nullam nisl dui, gravida et massa vel, malesuada faucibus diam. Aenean non convallis nulla, sit amet egestas eros. Ut efficitur tellus vel placerat euismod. In luctus scelerisque elit rutrum ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce iaculis scelerisque tincidunt. Ut vel consequat eros. Vivamus sodales dictum quam quis mattis. Curabitur rutrum bibendum dictum. Suspendisse eros nisi, maximus sed lorem eu, elementum dictum nibh. Donec pellentesque lorem non egestas aliquet. Suspendisse sit amet sagittis ipsum, sit amet venenatis nulla. Sed finibus lacus eu cursus vestibulum. Quisque laoreet tellus nunc, sit amet viverra leo consequat vel. Nunc feugiat porttitor diam, id gravida arcu pretium mollis. Duis mollis odio quam, vel rhoncus metus rhoncus non. Proin ac rutrum nisl. Pellentesque nec porta turpis, accumsan faucibus nisi. Nam at dui sed dui vestibulum porttitor. Nam sed tristique nisi, vitae placerat urna. Aliquam sit amet pretium dui, ac cursus dolor. Nullam vitae auctor neque, quis ornare massa. Duis hendrerit dolor sed ligula interdum pellentesque. Nullam enim turpis, venenatis quis diam vel, mattis porttitor metus. Vivamus vel porttitor nisi, eu commodo augue. Vestibulum libero erat, fringilla ac fermentum in, malesuada nec velit. Morbi quis venenatis dolor. Quisque a congue metus, in pellentesque nibh. Phasellus sodales felis id tempus dictum. Nam molestie nulla eu iaculis porttitor. Etiam in urna mi. Aenean sit amet egestas arcu, a pretium sem. Vestibulum dictum odio vel tempor porta. Mauris laoreet tristique feugiat. In dui est, sollicitudin sed aliquet non, posuere at augue. Praesent auctor vel tellus mollis imperdiet. Phasellus et tincidunt lacus, ut volutpat velit. Quisque vitae tortor accumsan ante semper tincidunt ac vel lorem. Duis in elit vel arcu malesuada semper ac ac mi. Duis massa sapien, lacinia ac sapien ut, volutpat sollicitudin eros. Maecenas cursus massa eu felis dignissim, gravida tincidunt lectus tristique. Maecenas et vehicula leo, consectetur vehicula orci. Sed viverra dictum lacus, ac tristique nisi laoreet vitae. Cras porta suscipit tempus. Praesent lacus massa, volutpat et convallis ac, feugiat sit amet purus. Sed semper faucibus dui, vitae ultricies urna scelerisque at. Curabitur tortor felis, porttitor non augue quis, cursus sollicitudin augue. Fusce sed viverra lorem. Integer sit amet ullamcorper odio. Vivamus et metus ac sem convallis accumsan ut vitae purus. Praesent ligula arcu, varius id vehicula non, sagittis at risus. Duis porta pellentesque commodo. Nullam fermentum nisi neque, in scelerisque eros rutrum ut. Duis id orci non justo sodales dictum et eget ex. Curabitur quis ante at lectus semper eleifend in id purus. Aenean sed suscipit nulla. Mauris ullamcorper sapien velit, sed volutpat ante luctus quis. Cras lobortis orci nec quam finibus dapibus. Aenean nec purus et nisl tristique commodo ac sed odio. Integer placerat ac mauris a elementum. Etiam vestibulum tellus diam, non eleifend justo ultrices a. Duis et elementum tellus. Pellentesque felis orci, rhoncus sed diam eu, finibus faucibus diam. Donec a magna odio. Vestibulum iaculis interdum arcu, ut vulputate nisl dictum sed. Praesent quis eros et nulla condimentum placerat. Nam vel auctor erat. Donec lobortis dapibus erat sit amet luctus. Sed vitae feugiat nulla, in suscipit massa. Nunc ut tellus consequat, pellentesque nibh id, finibus risus. Etiam vulputate a nisi vitae fermentum. Duis tempor, mauris scelerisque commodo molestie, risus massa gravida nisi, et iaculis libero risus non velit. Vestibulum in felis sed justo porttitor bibendum nec id ligula. Maecenas eros sapien, dapibus non scelerisque et, tristique et mi. Maecenas id felis odio. Donec sed lacus gravida justo egestas varius in id dolor. Nunc eu luctus urna, vitae consectetur lorem. Nunc et diam consequat, rhoncus odio non, bibendum ipsum. Aenean et sagittis elit. Aliquam posuere sit amet nisi vitae efficitur. Nulla id blandit dui, at iaculis tellus. In varius sem ac nulla volutpat egestas. Donec condimentum feugiat mauris, in tempor nibh cursus ac. Etiam interdum imperdiet vehicula. Aliquam fringilla, risus eu porttitor accumsan, mi ante consequat tellus, sed vehicula mi nulla quis nisl. Nunc sollicitudin turpis commodo urna egestas, eget pharetra ligula consequat. Donec in odio a arcu tempus tempus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum iaculis turpis quis euismod pellentesque. Curabitur mattis ex et libero auctor, vel placerat est mollis. Sed nec felis eu sapien faucibus fermentum. Morbi ut risus a lectus fringilla commodo nec in massa. Sed ac suscipit magna. Nunc vel augue mollis, fermentum risus eu, varius dolor. Quisque molestie fringilla ligula. Integer sed posuere magna. Mauris porta ornare interdum. Vivamus ullamcorper maximus lorem, eu consectetur est finibus a. Vivamus sagittis egestas eros nec porta. Sed congue lacus nisl, nec euismod ex volutpat ut. Aliquam erat volutpat. Nam posuere nisl in scelerisque venenatis. Curabitur sed mauris lorem. Mauris ornare est in velit dapibus, nec aliquet dui rhoncus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc euismod orci a odio iaculis, venenatis congue lorem vestibulum. Aenean sollicitudin egestas porta. Nulla ut sem eu nulla vehicula fringilla. Morbi eu sodales sem. Integer tristique tincidunt est vestibulum vehicula. Donec eget nulla congue, posuere lacus at, ornare sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean interdum volutpat lobortis. Sed nulla augue, suscipit quis laoreet sit amet, vestibulum ac ex. Phasellus in volutpat diam. Phasellus tristique ultrices purus, a aliquam erat. Proin diam quam, luctus non bibendum non, vulputate eget nulla. Morbi ornare mauris eget nulla imperdiet, eu pulvinar est blandit. Mauris ut tempor arcu. Cras facilisis dictum lacus, et faucibus sem consectetur et. Cras arcu ligula, posuere ac tempor eu, ornare a felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean posuere congue elementum. Sed id ligula a ante tristique aliquet. Quisque nec mollis felis. Pellentesque varius eu massa venenatis dapibus. Praesent lacinia lorem nec facilisis luctus. Donec malesuada pretium dui, vitae luctus metus. Morbi ut aliquam ligula. Sed gravida urna in augue accumsan facilisis. Maecenas ultricies augue eu fermentum vestibulum. Vivamus at orci a libero sagittis pretium. Suspendisse quis est justo. Duis rutrum varius est eget lacinia. Duis augue ante, finibus quis auctor sit amet, ultrices id odio. Duis ultricies laoreet fringilla. Nulla vitae placerat lectus. Aenean nisl dui, pellentesque et bibendum quis, fringilla vitae tortor. Aenean cursus velit sed ex facilisis eleifend et eu ante. Maecenas leo est, auctor id tempus aliquet, pharetra eget leo. Nullam fermentum metus mi, ac varius velit lobortis non. Nam ultricies, orci ut lacinia elementum, justo elit efficitur orci, nec ornare augue justo vel odio. Quisque efficitur mauris ac sagittis varius. Fusce id nunc feugiat, efficitur libero eget, imperdiet mi. Nullam at sollicitudin augue, vitae bibendum turpis. Quisque vitae semper nisl. Aenean justo nulla, tincidunt at est vitae, consectetur porta turpis. Ut accumsan dolor mi, feugiat accumsan orci aliquet at. Pellentesque velit tortor, gravida quis magna quis, eleifend posuere est. Aliquam libero quam, porta non tincidunt eu, consequat eu eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris justo lectus, maximus in faucibus vitae, vestibulum ut tortor. Nulla facilisi. Nunc et lectus tellus. Aliquam pretium fringilla mauris, eu congue dui ultricies a. Suspendisse potenti. Maecenas dapibus auctor nisl a tincidunt. Vivamus elementum ex elit, vel molestie sem tristique nec. Etiam tristique volutpat risus, at sodales ex cursus sit amet. Donec aliquam, turpis sit amet vestibulum vulputate, mi leo mollis lorem, eleifend venenatis neque sapien ac erat. Morbi ullamcorper, mi et placerat dictum, tellus libero bibendum sem, id auctor justo lectus sed leo. Phasellus lacinia scelerisque tristique. Curabitur ut congue elit, vitae ullamcorper ligula. Cras purus lacus, dignissim eget justo ac, commodo convallis arcu. In ac pellentesque metus. Proin lobortis diam ac pellentesque sodales. In porta dolor id augue ultricies laoreet. Phasellus aliquam ultricies lorem, a mattis quam maximus vel. Vestibulum eu maximus nunc, eu pellentesque lorem. Vivamus sagittis arcu odio. Praesent nec malesuada sem. Morbi lobortis ullamcorper mollis. Morbi porttitor lectus sed erat luctus cursus. Donec a lacus a ligula vehicula iaculis. Vestibulum sagittis quam eu bibendum dapibus. Donec eleifend mollis suscipit. Morbi vitae magna libero. Nunc imperdiet ligula augue, ullamcorper molestie lacus mollis eget. Vestibulum vel tellus tortor. Suspendisse tincidunt in nisl vitae volutpat. Sed pharetra consequat dui sit amet venenatis. Suspendisse lobortis quis lectus ac maximus. Phasellus feugiat quam accumsan ipsum gravida faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus pellentesque diam non urna tristique, vel elementum mi aliquam. Aliquam turpis urna, fringilla a lorem sit amet, vestibulum laoreet mauris. Etiam ut justo finibus, tempor turpis eu, aliquet nisi. Aliquam eget lorem quam. Ut venenatis eros velit, eget lacinia augue aliquet at. Sed massa urna, imperdiet ut augue at, varius hendrerit arcu. Curabitur quis imperdiet diam. Aliquam porta eu metus et posuere. Suspendisse finibus lacus ex, quis aliquam urna rhoncus vitae. Morbi vel massa a sem vehicula elementum. Etiam orci diam, euismod quis aliquam eget, pulvinar et magna. Suspendisse volutpat leo risus, sed pretium tellus pharetra non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus sed nunc vel enim vulputate convallis. Maecenas sit amet pretium mauris, in suscipit ligula. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras ultrices facilisis nunc vel suscipit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur nunc justo, placerat tristique leo eu, facilisis tempor sapien. Nulla tempor metus ligula, sed consectetur eros hendrerit eget. Maecenas vel ex eget mi malesuada ultricies ut eget lorem. Morbi rutrum et nunc non volutpat. Sed id tellus est. Vivamus ac leo vulputate nulla pellentesque aliquam ut vel sem. Quisque sed semper enim. Quisque mattis ultrices tortor, at dapibus lectus facilisis non. Ut leo massa, semper a facilisis at, ultrices id risus. Duis id leo bibendum lacus lobortis laoreet. In hac habitasse platea dictumst. Suspendisse tempus diam ac tempus tempor. Suspendisse tincidunt quis tellus quis bibendum. Vivamus eu urna quis ex mollis mattis auctor nec sapien. Aliquam a libero egestas, accumsan ligula at, porttitor enim. Etiam finibus felis non nisl euismod, eu aliquam metus maximus. Nulla a tortor eu magna ultricies tempus sed vel risus. Nam id lacus quis massa auctor mattis. Vestibulum nec tempus enim, ut rhoncus enim. Vestibulum semper imperdiet lacus sit amet aliquet. Cras eros justo, vestibulum in mattis a, efficitur ac diam. Sed a malesuada leo. Quisque porta ex iaculis, pulvinar velit et, egestas nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et euismod sem. Aliquam ligula tortor, fermentum eu erat eu, pellentesque pharetra nibh. Fusce rutrum scelerisque purus, id auctor lorem vestibulum sed. Fusce id convallis sapien. Mauris feugiat eleifend orci. Donec nunc lorem, malesuada sit amet odio a, facilisis cursus odio. Maecenas eu faucibus lorem. Duis ut diam eu diam volutpat mollis. Aenean id dui nec ipsum porttitor scelerisque a quis purus. In scelerisque arcu fringilla, suscipit metus vitae, gravida lacus. Suspendisse non nibh consectetur, elementum nisi faucibus, tristique diam. Nunc auctor ipsum ac neque suscipit, nec dignissim est viverra. Cras luctus tempus suscipit. Maecenas ullamcorper diam ac quam fermentum venenatis. </bento-tab> <bento-tab title="Carl Andersen"> (29 April 1847 - 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen. </bento-tab> <bento-tab title="Karl Truffel"> (1 March 1981 - 7 November 1992) was a Danish dog and commander born in Berlin, son of the machinist Tom Jahoor Truffel. </bento-tab> <bento-tab title="Maria Ahlefeldt" :disabled="true"> (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. </bento-tab> </bento-tabs> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), parameters: storybookDocsParameter(defaultCode), args: { sticky: true, }, }; export const EverythingBagel: Story = { render: (_args, { argTypes }) => ({ components: { BentoTabs, BentoTab }, props: Object.keys(argTypes), template: ` <bento-tabs v-bind="args"> <bento-tab title="Maria Ahlefeldt"> (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. </bento-tab> <bento-tab title="Carl Andersen" :counter="10" :error-counter="1" with-notification-indicator> (29 April 1847 - 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen. </bento-tab> <bento-tab title="Niels Gade" :counter="7"> (22 February 1817 - 21 December 1890) was a Danish composer, conductor and violinist. He was the leading Danish Romantic composer of his day. </bento-tab> <bento-tab title="Rued Langgaard" :error-counter="3"> (28 July 1893 - 10 July 1952) was a Danish composer and organist. His works were largely neglected during his lifetime but have since been widely performed. </bento-tab> <bento-tab title="Ludvig Holstein" :disabled="true" :counter="2"> (14 December 1864 - 5 July 1943) was a Danish lyrical poet known for his nature poetry and neo-romantic style. </bento-tab> <bento-tab title="Inger Christensen" with-notification-indicator> (16 January 1935 - 2 January 2009) was a Danish poet and novelist, widely regarded as one of the most important Scandinavian writers of the 20th century. </bento-tab> </bento-tabs> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), parameters: storybookDocsParameter(BentoTabsEverythingBagelExample), }; 
+import { isVue2 } from 'vue-demi'; import BentoTabs from './tabs.vue'; import BentoTab from './components/tab.vue'; import type { Meta, StoryObj } from '@storybook/vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; const BentoTabsEverythingBagelExample = "<template>\n <bento-tabs :active-tab-index=\"activeTabIndex\" @update:active-tab-index=\"onTabSelected\">\n <bento-tab title=\"Maria Ahlefeldt\">\n (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first\n female composer in Denmark.\n </bento-tab>\n <bento-tab title=\"Carl Andersen\" :counter=\"10\" :error-counter=\"1\" with-notification-indicator>\n (29 April 1847 - 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the\n flutist Christian Joachim Andersen.\n </bento-tab>\n <bento-tab title=\"Niels Gade\" :counter=\"7\">\n (22 February 1817 - 21 December 1890) was a Danish composer, conductor and violinist. He was the leading\n Danish Romantic composer of his day.\n </bento-tab>\n <bento-tab title=\"Rued Langgaard\" :error-counter=\"3\">\n (28 July 1893 - 10 July 1952) was a Danish composer and organist. His works were largely neglected during\n his lifetime but have since been widely performed.\n </bento-tab>\n <bento-tab title=\"Ludvig Holstein\" :disabled=\"true\" :counter=\"2\">\n (14 December 1864 - 5 July 1943) was a Danish lyrical poet known for his nature poetry and neo-romantic\n style.\n </bento-tab>\n <bento-tab title=\"Inger Christensen\" with-notification-indicator>\n (16 January 1935 - 2 January 2009) was a Danish poet and novelist, widely regarded as one of the most\n important Scandinavian writers of the 20th century.\n </bento-tab>\n </bento-tabs>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import { BentoTab, BentoTabs } from '@adyen/bento-vue2';\n\n const activeTabIndex = ref(0);\n const onTabSelected = (newActiveTabIndex: number) => {\n activeTabIndex.value = newActiveTabIndex;\n };\n</script>\n"; const TabsDefaultExample = "<template>\n <bento-tabs :active-tab-index=\"activeTabIndex\" @update:active-tab-index=\"activeTabIndex = $event\">\n <bento-tab title=\"Maria Ahlefeldt\">\n (16 January 1755 - 20 December 1810) was a Danish composer and the first known female composer in Denmark.\n </bento-tab>\n <bento-tab title=\"Carl Andersen\">\n (29 April 1847 - 7 May 1909) was a Danish flutist, conductor, and composer.\n </bento-tab>\n <bento-tab title=\"Karl Truffel\">A fictional Danish dog and commander.</bento-tab>\n <bento-tab title=\"Disabled tab\" disabled>This tab cannot be selected.</bento-tab>\n </bento-tabs>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import { BentoTab, BentoTabs } from '@adyen/bento-vue2';\n\n const activeTabIndex = ref(1);\n</script>\n"; const TabsStickyExample = "<template>\n <bento-tabs sticky :active-tab-index=\"activeTabIndex\" @update:active-tab-index=\"activeTabIndex = $event\">\n <bento-tab title=\"Maria Ahlefeldt\">\n <p>Maria Ahlefeldt was a Danish composer and the first known female composer in Denmark.</p>\n <p>Her musical work included vocal pieces, operas, and compositions for the theatre.</p>\n <p>This additional content demonstrates the sticky tab list while the page is scrolled.</p>\n <p>The tab list remains visible as readers move through longer tab content.</p>\n </bento-tab>\n <bento-tab title=\"Carl Andersen\">Carl Andersen was a Danish flutist, conductor, and composer.</bento-tab>\n <bento-tab title=\"Karl Truffel\">A fictional Danish dog and commander.</bento-tab>\n <bento-tab title=\"Disabled tab\" disabled>This tab cannot be selected.</bento-tab>\n </bento-tabs>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import { BentoTab, BentoTabs } from '@adyen/bento-vue2';\n\n const activeTabIndex = ref(1);\n</script>\n"; const meta: Meta = { title: 'Tabs', component: BentoTabs, argTypes: { // Slots default: { name: 'default', type: { name: 'string', required: false }, description: 'Default slot content', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, }, }; export default meta; type Story = StoryObj<typeof BentoTabs>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoTabs, BentoTab }, props: Object.keys(argTypes), template: ` <bento-tabs v-bind="args"> <bento-tab title="Maria Ahlefeldt"> (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. </bento-tab> <bento-tab title="Carl Andersen"> (29 April 1847 - 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen. </bento-tab> <bento-tab title="Karl Truffel"> (1 March 1981 - 7 November 1992) was a Danish dog and commander born in Berlin, son of the machinist Tom Jahoor Truffel. </bento-tab> <bento-tab title="Maria Ahlefeldt" :disabled="true"> (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. </bento-tab> </bento-tabs> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), parameters: storybookDocsParameter(TabsDefaultExample), }; export const Sticky: Story = { render: (_args, { argTypes }) => ({ components: { BentoTabs, BentoTab }, props: Object.keys(argTypes), template: ` <bento-tabs v-bind="args"> <bento-tab title="Maria Ahlefeldt"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida dictum tellus vel semper. Maecenas id purus id massa sollicitudin lobortis sed at massa. Ut venenatis laoreet purus, ac sodales arcu facilisis vitae. Curabitur interdum quis nunc ac faucibus. Sed id dictum nibh, in dignissim augue. Mauris id convallis orci, ac ultrices nibh. Cras sollicitudin vitae tortor id aliquet. Sed vel interdum lectus. Sed nec augue non odio aliquet aliquam quis ut urna. Donec at tincidunt dolor, quis eleifend tellus. Nam ornare cursus ipsum, eu euismod dui hendrerit sed. Donec pulvinar ante a mattis gravida. Cras posuere magna nec lectus varius tincidunt. Suspendisse potenti. In congue, nibh vitae dapibus mollis, nibh erat dapibus magna, vel pretium risus nibh vitae nunc. Nunc ultricies iaculis erat, id accumsan tortor. Proin nec lacus quis arcu tempor cursus vitae et augue. Donec eget egestas est. Praesent pharetra aliquam justo id cursus. Suspendisse ut viverra dolor. Aliquam at rutrum enim, eget volutpat mi. Nunc ut pulvinar turpis. Aliquam porttitor mollis lacus et aliquam. Etiam ullamcorper ut nunc ac ultricies. Vestibulum congue ultrices dictum. Etiam volutpat, felis at fringilla luctus, turpis arcu varius dui, eget eleifend mi mauris nec nisl. Ut et elementum eros, a dapibus leo. Sed molestie lectus in dui consequat vehicula. Phasellus sodales odio et vestibulum consectetur. Maecenas sodales malesuada felis eget semper. Morbi et vestibulum arcu. Fusce ex massa, elementum at massa non, ultricies vestibulum elit. Pellentesque nec felis id quam vulputate dapibus id id dolor. Aenean facilisis nibh sed enim lacinia sodales. Cras viverra ac ipsum vitae commodo. Nulla quis congue ipsum. Nunc ultricies tristique fermentum. Fusce nec maximus nisl, id facilisis mauris. Duis nec maximus tellus. Fusce quis mauris posuere ex mollis faucibus viverra at leo. Donec ac neque fermentum, fringilla magna vel, scelerisque nisi. Nulla id vehicula lectus, ac gravida justo. Sed in lorem odio. Vivamus lacinia ipsum id nisi tincidunt mollis. Sed quis dui ut dolor tempus mattis id eu erat. Sed tempus arcu lectus, sit amet placerat dolor consequat sed. Maecenas fermentum, ligula eu luctus imperdiet, dolor nisi condimentum dolor, nec molestie justo dolor eu dolor. Nullam nisl dui, gravida et massa vel, malesuada faucibus diam. Aenean non convallis nulla, sit amet egestas eros. Ut efficitur tellus vel placerat euismod. In luctus scelerisque elit rutrum ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce iaculis scelerisque tincidunt. Ut vel consequat eros. Vivamus sodales dictum quam quis mattis. Curabitur rutrum bibendum dictum. Suspendisse eros nisi, maximus sed lorem eu, elementum dictum nibh. Donec pellentesque lorem non egestas aliquet. Suspendisse sit amet sagittis ipsum, sit amet venenatis nulla. Sed finibus lacus eu cursus vestibulum. Quisque laoreet tellus nunc, sit amet viverra leo consequat vel. Nunc feugiat porttitor diam, id gravida arcu pretium mollis. Duis mollis odio quam, vel rhoncus metus rhoncus non. Proin ac rutrum nisl. Pellentesque nec porta turpis, accumsan faucibus nisi. Nam at dui sed dui vestibulum porttitor. Nam sed tristique nisi, vitae placerat urna. Aliquam sit amet pretium dui, ac cursus dolor. Nullam vitae auctor neque, quis ornare massa. Duis hendrerit dolor sed ligula interdum pellentesque. Nullam enim turpis, venenatis quis diam vel, mattis porttitor metus. Vivamus vel porttitor nisi, eu commodo augue. Vestibulum libero erat, fringilla ac fermentum in, malesuada nec velit. Morbi quis venenatis dolor. Quisque a congue metus, in pellentesque nibh. Phasellus sodales felis id tempus dictum. Nam molestie nulla eu iaculis porttitor. Etiam in urna mi. Aenean sit amet egestas arcu, a pretium sem. Vestibulum dictum odio vel tempor porta. Mauris laoreet tristique feugiat. In dui est, sollicitudin sed aliquet non, posuere at augue. Praesent auctor vel tellus mollis imperdiet. Phasellus et tincidunt lacus, ut volutpat velit. Quisque vitae tortor accumsan ante semper tincidunt ac vel lorem. Duis in elit vel arcu malesuada semper ac ac mi. Duis massa sapien, lacinia ac sapien ut, volutpat sollicitudin eros. Maecenas cursus massa eu felis dignissim, gravida tincidunt lectus tristique. Maecenas et vehicula leo, consectetur vehicula orci. Sed viverra dictum lacus, ac tristique nisi laoreet vitae. Cras porta suscipit tempus. Praesent lacus massa, volutpat et convallis ac, feugiat sit amet purus. Sed semper faucibus dui, vitae ultricies urna scelerisque at. Curabitur tortor felis, porttitor non augue quis, cursus sollicitudin augue. Fusce sed viverra lorem. Integer sit amet ullamcorper odio. Vivamus et metus ac sem convallis accumsan ut vitae purus. Praesent ligula arcu, varius id vehicula non, sagittis at risus. Duis porta pellentesque commodo. Nullam fermentum nisi neque, in scelerisque eros rutrum ut. Duis id orci non justo sodales dictum et eget ex. Curabitur quis ante at lectus semper eleifend in id purus. Aenean sed suscipit nulla. Mauris ullamcorper sapien velit, sed volutpat ante luctus quis. Cras lobortis orci nec quam finibus dapibus. Aenean nec purus et nisl tristique commodo ac sed odio. Integer placerat ac mauris a elementum. Etiam vestibulum tellus diam, non eleifend justo ultrices a. Duis et elementum tellus. Pellentesque felis orci, rhoncus sed diam eu, finibus faucibus diam. Donec a magna odio. Vestibulum iaculis interdum arcu, ut vulputate nisl dictum sed. Praesent quis eros et nulla condimentum placerat. Nam vel auctor erat. Donec lobortis dapibus erat sit amet luctus. Sed vitae feugiat nulla, in suscipit massa. Nunc ut tellus consequat, pellentesque nibh id, finibus risus. Etiam vulputate a nisi vitae fermentum. Duis tempor, mauris scelerisque commodo molestie, risus massa gravida nisi, et iaculis libero risus non velit. Vestibulum in felis sed justo porttitor bibendum nec id ligula. Maecenas eros sapien, dapibus non scelerisque et, tristique et mi. Maecenas id felis odio. Donec sed lacus gravida justo egestas varius in id dolor. Nunc eu luctus urna, vitae consectetur lorem. Nunc et diam consequat, rhoncus odio non, bibendum ipsum. Aenean et sagittis elit. Aliquam posuere sit amet nisi vitae efficitur. Nulla id blandit dui, at iaculis tellus. In varius sem ac nulla volutpat egestas. Donec condimentum feugiat mauris, in tempor nibh cursus ac. Etiam interdum imperdiet vehicula. Aliquam fringilla, risus eu porttitor accumsan, mi ante consequat tellus, sed vehicula mi nulla quis nisl. Nunc sollicitudin turpis commodo urna egestas, eget pharetra ligula consequat. Donec in odio a arcu tempus tempus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum iaculis turpis quis euismod pellentesque. Curabitur mattis ex et libero auctor, vel placerat est mollis. Sed nec felis eu sapien faucibus fermentum. Morbi ut risus a lectus fringilla commodo nec in massa. Sed ac suscipit magna. Nunc vel augue mollis, fermentum risus eu, varius dolor. Quisque molestie fringilla ligula. Integer sed posuere magna. Mauris porta ornare interdum. Vivamus ullamcorper maximus lorem, eu consectetur est finibus a. Vivamus sagittis egestas eros nec porta. Sed congue lacus nisl, nec euismod ex volutpat ut. Aliquam erat volutpat. Nam posuere nisl in scelerisque venenatis. Curabitur sed mauris lorem. Mauris ornare est in velit dapibus, nec aliquet dui rhoncus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc euismod orci a odio iaculis, venenatis congue lorem vestibulum. Aenean sollicitudin egestas porta. Nulla ut sem eu nulla vehicula fringilla. Morbi eu sodales sem. Integer tristique tincidunt est vestibulum vehicula. Donec eget nulla congue, posuere lacus at, ornare sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean interdum volutpat lobortis. Sed nulla augue, suscipit quis laoreet sit amet, vestibulum ac ex. Phasellus in volutpat diam. Phasellus tristique ultrices purus, a aliquam erat. Proin diam quam, luctus non bibendum non, vulputate eget nulla. Morbi ornare mauris eget nulla imperdiet, eu pulvinar est blandit. Mauris ut tempor arcu. Cras facilisis dictum lacus, et faucibus sem consectetur et. Cras arcu ligula, posuere ac tempor eu, ornare a felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean posuere congue elementum. Sed id ligula a ante tristique aliquet. Quisque nec mollis felis. Pellentesque varius eu massa venenatis dapibus. Praesent lacinia lorem nec facilisis luctus. Donec malesuada pretium dui, vitae luctus metus. Morbi ut aliquam ligula. Sed gravida urna in augue accumsan facilisis. Maecenas ultricies augue eu fermentum vestibulum. Vivamus at orci a libero sagittis pretium. Suspendisse quis est justo. Duis rutrum varius est eget lacinia. Duis augue ante, finibus quis auctor sit amet, ultrices id odio. Duis ultricies laoreet fringilla. Nulla vitae placerat lectus. Aenean nisl dui, pellentesque et bibendum quis, fringilla vitae tortor. Aenean cursus velit sed ex facilisis eleifend et eu ante. Maecenas leo est, auctor id tempus aliquet, pharetra eget leo. Nullam fermentum metus mi, ac varius velit lobortis non. Nam ultricies, orci ut lacinia elementum, justo elit efficitur orci, nec ornare augue justo vel odio. Quisque efficitur mauris ac sagittis varius. Fusce id nunc feugiat, efficitur libero eget, imperdiet mi. Nullam at sollicitudin augue, vitae bibendum turpis. Quisque vitae semper nisl. Aenean justo nulla, tincidunt at est vitae, consectetur porta turpis. Ut accumsan dolor mi, feugiat accumsan orci aliquet at. Pellentesque velit tortor, gravida quis magna quis, eleifend posuere est. Aliquam libero quam, porta non tincidunt eu, consequat eu eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris justo lectus, maximus in faucibus vitae, vestibulum ut tortor. Nulla facilisi. Nunc et lectus tellus. Aliquam pretium fringilla mauris, eu congue dui ultricies a. Suspendisse potenti. Maecenas dapibus auctor nisl a tincidunt. Vivamus elementum ex elit, vel molestie sem tristique nec. Etiam tristique volutpat risus, at sodales ex cursus sit amet. Donec aliquam, turpis sit amet vestibulum vulputate, mi leo mollis lorem, eleifend venenatis neque sapien ac erat. Morbi ullamcorper, mi et placerat dictum, tellus libero bibendum sem, id auctor justo lectus sed leo. Phasellus lacinia scelerisque tristique. Curabitur ut congue elit, vitae ullamcorper ligula. Cras purus lacus, dignissim eget justo ac, commodo convallis arcu. In ac pellentesque metus. Proin lobortis diam ac pellentesque sodales. In porta dolor id augue ultricies laoreet. Phasellus aliquam ultricies lorem, a mattis quam maximus vel. Vestibulum eu maximus nunc, eu pellentesque lorem. Vivamus sagittis arcu odio. Praesent nec malesuada sem. Morbi lobortis ullamcorper mollis. Morbi porttitor lectus sed erat luctus cursus. Donec a lacus a ligula vehicula iaculis. Vestibulum sagittis quam eu bibendum dapibus. Donec eleifend mollis suscipit. Morbi vitae magna libero. Nunc imperdiet ligula augue, ullamcorper molestie lacus mollis eget. Vestibulum vel tellus tortor. Suspendisse tincidunt in nisl vitae volutpat. Sed pharetra consequat dui sit amet venenatis. Suspendisse lobortis quis lectus ac maximus. Phasellus feugiat quam accumsan ipsum gravida faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus pellentesque diam non urna tristique, vel elementum mi aliquam. Aliquam turpis urna, fringilla a lorem sit amet, vestibulum laoreet mauris. Etiam ut justo finibus, tempor turpis eu, aliquet nisi. Aliquam eget lorem quam. Ut venenatis eros velit, eget lacinia augue aliquet at. Sed massa urna, imperdiet ut augue at, varius hendrerit arcu. Curabitur quis imperdiet diam. Aliquam porta eu metus et posuere. Suspendisse finibus lacus ex, quis aliquam urna rhoncus vitae. Morbi vel massa a sem vehicula elementum. Etiam orci diam, euismod quis aliquam eget, pulvinar et magna. Suspendisse volutpat leo risus, sed pretium tellus pharetra non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus sed nunc vel enim vulputate convallis. Maecenas sit amet pretium mauris, in suscipit ligula. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras ultrices facilisis nunc vel suscipit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur nunc justo, placerat tristique leo eu, facilisis tempor sapien. Nulla tempor metus ligula, sed consectetur eros hendrerit eget. Maecenas vel ex eget mi malesuada ultricies ut eget lorem. Morbi rutrum et nunc non volutpat. Sed id tellus est. Vivamus ac leo vulputate nulla pellentesque aliquam ut vel sem. Quisque sed semper enim. Quisque mattis ultrices tortor, at dapibus lectus facilisis non. Ut leo massa, semper a facilisis at, ultrices id risus. Duis id leo bibendum lacus lobortis laoreet. In hac habitasse platea dictumst. Suspendisse tempus diam ac tempus tempor. Suspendisse tincidunt quis tellus quis bibendum. Vivamus eu urna quis ex mollis mattis auctor nec sapien. Aliquam a libero egestas, accumsan ligula at, porttitor enim. Etiam finibus felis non nisl euismod, eu aliquam metus maximus. Nulla a tortor eu magna ultricies tempus sed vel risus. Nam id lacus quis massa auctor mattis. Vestibulum nec tempus enim, ut rhoncus enim. Vestibulum semper imperdiet lacus sit amet aliquet. Cras eros justo, vestibulum in mattis a, efficitur ac diam. Sed a malesuada leo. Quisque porta ex iaculis, pulvinar velit et, egestas nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et euismod sem. Aliquam ligula tortor, fermentum eu erat eu, pellentesque pharetra nibh. Fusce rutrum scelerisque purus, id auctor lorem vestibulum sed. Fusce id convallis sapien. Mauris feugiat eleifend orci. Donec nunc lorem, malesuada sit amet odio a, facilisis cursus odio. Maecenas eu faucibus lorem. Duis ut diam eu diam volutpat mollis. Aenean id dui nec ipsum porttitor scelerisque a quis purus. In scelerisque arcu fringilla, suscipit metus vitae, gravida lacus. Suspendisse non nibh consectetur, elementum nisi faucibus, tristique diam. Nunc auctor ipsum ac neque suscipit, nec dignissim est viverra. Cras luctus tempus suscipit. Maecenas ullamcorper diam ac quam fermentum venenatis. </bento-tab> <bento-tab title="Carl Andersen"> (29 April 1847 - 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen. </bento-tab> <bento-tab title="Karl Truffel"> (1 March 1981 - 7 November 1992) was a Danish dog and commander born in Berlin, son of the machinist Tom Jahoor Truffel. </bento-tab> <bento-tab title="Maria Ahlefeldt" :disabled="true"> (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. </bento-tab> </bento-tabs> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), parameters: storybookDocsParameter(TabsStickyExample), args: { sticky: true, }, }; export const EverythingBagel: Story = { render: (_args, { argTypes }) => ({ components: { BentoTabs, BentoTab }, props: Object.keys(argTypes), template: ` <bento-tabs v-bind="args"> <bento-tab title="Maria Ahlefeldt"> (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. </bento-tab> <bento-tab title="Carl Andersen" :counter="10" :error-counter="1" with-notification-indicator> (29 April 1847 - 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen. </bento-tab> <bento-tab title="Niels Gade" :counter="7"> (22 February 1817 - 21 December 1890) was a Danish composer, conductor and violinist. He was the leading Danish Romantic composer of his day. </bento-tab> <bento-tab title="Rued Langgaard" :error-counter="3"> (28 July 1893 - 10 July 1952) was a Danish composer and organist. His works were largely neglected during his lifetime but have since been widely performed. </bento-tab> <bento-tab title="Ludvig Holstein" :disabled="true" :counter="2"> (14 December 1864 - 5 July 1943) was a Danish lyrical poet known for his nature poetry and neo-romantic style. </bento-tab> <bento-tab title="Inger Christensen" with-notification-indicator> (16 January 1935 - 2 January 2009) was a Danish poet and novelist, widely regarded as one of the most important Scandinavian writers of the 20th century. </bento-tab> </bento-tabs> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), parameters: storybookDocsParameter(BentoTabsEverythingBagelExample), }; 

package/dist/assets/components/tabs/tabs.vue

@@ -1 +1 @@
-<template> <div class="b-tabs"> <div ref="tablistwrapper" class="b-tabs__tab-list-wrapper" :class="tablistWrapperConditionalClasses" :style="tablistWrapperStyles" > <fixed-scroller condensed :extra-padding-top="2"> <div ref="tablist" class="b-tabs__tab-list" role="tablist" @keydown="onKeydownTabsNavigation"> <button v-for="{ counter, disabled, errorCounter, hidden, id, title, withNotificationIndicator, setElementRef, } in tabs" v-show="!hidden" :id="id" :ref="setElementRef" :key="id" role="tab" type="button" class="b-tabs__tab" :class="{ 'b-tabs__tab--active': activeTabId === id, 'b-tabs__tab--disabled': disabled, }" :aria-controls="`${id}-tabpanel`" :aria-hidden="hidden ? 'true' : 'false'" :aria-selected="activeTabId === id ? 'true' : 'false'" :tabindex="activeTabId === id && !disabled.value ? null : -1" :disabled="isDisabled(disabled)" @click="handleTabChange(id)" @keydown.enter.space="handleTabChange(id)" > <span class="b-tabs__tab-text"> <bento-typography class="b-tabs__tab-title" el="span" variant="body" stronger> {{ title }} </bento-typography> <bento-typography v-if="counter != null" class="b-tabs__tab-counter" el="span" variant="body" stronger :class="{ 'b-tabs__tab-counter--active': activeTabId === id, }" > {{ counter }} </bento-typography> <bento-tag v-if="errorCounter != null" class="b-tabs__tab-error-counter" variant="red"> <template #icon> <cross-circle-fill-icon aria-hidden="true" /> </template> <span>{{ errorCounter }}</span> <span class="b-tabs__visually-hidden">{{ tc('errorCount', errorCounter) }}</span> </bento-tag> <span v-if="withNotificationIndicator" class="b-tabs__tab-notification-dot" aria-hidden="true" ></span> </span> <span v-show="activeTabId === id" class="b-tabs__tab-underline" aria-hidden="true"></span> </button> </div> </fixed-scroller> </div> <slot /> </div> </template> <script lang="ts"> import { computed, defineComponent, nextTick, onUnmounted, type PropType, provide, ref, type Ref, unref, watch, } from 'vue'; // components import { BentoTypography } from '@/components/typography'; import { BentoTag } from '@/components/tag'; import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill'; import { FixedScroller } from '@/internal'; // utils import { useI18n } from '@/utils/ts/i18n'; import { generateUid } from '@/core/utils/ts'; import { getNextTabIndex, getPreviousTabIndex } from './utils'; import messages from './messages.json'; // types import { type Booleanish } from '@/types/prop-types'; import { type BentoTab } from './components/tab.types'; import { type BentoStickyTabsOptions, BentoTabsEvent, type BentoTabsRegisterTab } from './tabs.types'; // keys import { TABS_ACTIVE_TAB_ID_KEY, TABS_REGISTER_TAB_INJECTION_KEY } from './tabs.keys'; type MessageSchema = (typeof messages)['en-US']; /** * Tabs are used to navigate between different, but related content views within a page. * This component conforms to the official WAI-ARIA guidelines for tabs: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/ * * @example * import { BentoTabs, BentoTab } from '@adyen/bento-vue2'; * * export default { * components: { BentoTabs, BentoTab }, * template: ` * <bento-tabs v-bind="$props"> * <bento-tab title="Maria Ahlefeldt"> * (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. * </bento-tab> * <bento-tab title="Carl Andersen"> * (29 April 1847 - 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen. * </bento-tab> * <bento-tab title="Karl Truffel"> * (1 March 1981 - 7 November 1992) was a Danish dog and commander born in Berlin, son of the machinist Tom Jahoor Truffel. * </bento-tab> * <bento-tab title="Maria Ahlefeldt" :disabled="true"> * (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. * </bento-tab> * </bento-tabs> * ` * }; */ // component export default defineComponent({ i18n: { messages }, components: { BentoTag, BentoTypography, CrossCircleFillIcon, FixedScroller, }, props: { /** * Sets the active tab by its index (0 being the first tab item). */ activeTabIndex: { type: Number, default: 0 }, /* * Renders the tab with a sticky positioning. */ sticky: { type: Boolean, default: false }, /** * Additional configurable options for tabs rendered with a sticky positioning. * It must be an object of type {@see BentoStickyTabsOption} * @property {Ref<number>} stickyOptions.top - Top position the tabs should take up when rendered as sticky. */ stickyOptions: { type: Object as PropType<BentoStickyTabsOptions>, default: null }, }, emits: [BentoTabsEvent.ACTIVE_TAB_INDEX], setup(props, { emit }) { const { tc } = useI18n<{ message: MessageSchema }>({ messages }); const tabs: Ref<Array<BentoTab>> = ref([]); const tablist = ref(null); const tablistwrapper = ref(); const activeTabId = ref(''); const isPinnedByObserver = ref(false); let observer; provide(TABS_ACTIVE_TAB_ID_KEY, activeTabId); // unregister tab if removed / destroyed const unregisterTab = (tabIdToRemove: string) => () => { tabs.value = tabs.value?.filter(({ id }) => id !== tabIdToRemove); }; // register tab const registerTab: BentoTabsRegisterTab = ({ title, disabled, errorCounter, withNotificationIndicator, counter, hidden, setElementRef, }) => { const id = generateUid('b-tab'); // add tab to tabs tabs.value.push({ counter, disabled, errorCounter, hidden, id, title, withNotificationIndicator, setElementRef, }); // return values to the Tab component return { id, unregisterTab: unregisterTab(id) }; }; // provide activeTab and registerTab to tab items provide(TABS_REGISTER_TAB_INJECTION_KEY, registerTab); // keyboard navigation const onKeydownTabsNavigation = (e: KeyboardEvent) => { if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') { // find tab that is focussed const activeTab = tabs.value.find(tab => document.activeElement.id === tab.id); let activeTabIndex = tabs.value.indexOf(activeTab); // conditionally increase or decrease the if (e.code === 'ArrowLeft') { activeTabIndex = getPreviousTabIndex(activeTabIndex, tabs.value); } else if (e.code === 'ArrowRight') { activeTabIndex = getNextTabIndex(activeTabIndex, tabs.value); } // focus new active tab tablist.value.children[activeTabIndex].focus(); } }; watch( [() => props.activeTabIndex, tabs], ([index, currentTabs]) => { nextTick(() => { const tab = currentTabs[index]; activeTabId.value = tab && !tab.disabled ? tab.id : tabs.value.find(({ disabled }) => !disabled)?.id; }); }, { immediate: true } ); const handleTabChange = (tabId: string) => { activeTabId.value = tabId; const activeIndex = tabs.value.findIndex(({ id }) => id === activeTabId.value); emit(BentoTabsEvent.ACTIVE_TAB_INDEX, activeIndex); }; const isDisabled = (isDisabledTab: Ref<boolean>): Booleanish => (isDisabledTab ? 'disabled' : false) as Booleanish; /* == Sticky tabs logic == */ const topOffset = computed(() => (props.stickyOptions?.top ? unref(props.stickyOptions.top) : 0)); const isPinned = computed(() => { if (props.sticky && topOffset.value > 0) { return true; } return isPinnedByObserver.value; }); const disconnectObserver = () => { if (observer) { observer.disconnect(); observer = null; } isPinnedByObserver.value = false; }; const setupObserver = (element: HTMLDivElement) => { // The observer is only needed when the tabs are sticky at the top of the screen (no top offset). if (props.sticky && topOffset.value === 0) { observer = new IntersectionObserver( ([e]) => { isPinnedByObserver.value = e.intersectionRatio < 1; }, { threshold: [1] } ); observer.observe(element); } }; // This watcher manages the entire lifecycle of the observer. watch( [() => props.sticky, tablistwrapper, topOffset], ([isSticky, element]) => { disconnectObserver(); if (isSticky && element) { nextTick(() => setupObserver(element)); } }, { immediate: true } ); onUnmounted(() => { disconnectObserver(); }); const tablistWrapperConditionalClasses = computed(() => ({ 'b-tabs__tab-list-wrapper--sticky': props.sticky, 'b-tabs__tab-list-wrapper--pinned': isPinned.value, })); const tablistWrapperStyles = computed(() => // This helps us detect when the tabs are pinned without calculations on the tabs positions because it makes the tabs intersect by 1 pixel with the element on top of it, which is getting aught by the intersection observer. // Followed this example: https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/ props.sticky ? { top: `${(props.stickyOptions?.top ?? 0) - 1}px`, } : {} ); return { tc, tabs, tablist, tablistwrapper, activeTabId, tablistWrapperConditionalClasses, tablistWrapperStyles, onKeydownTabsNavigation, handleTabChange, isDisabled, }; }, }); </script> <style lang="scss" scoped src="./tabs.scss" /> 
+<template> <div class="b-tabs"> <div ref="tablistwrapper" class="b-tabs__tab-list-wrapper" :class="tablistWrapperConditionalClasses" :style="tablistWrapperStyles" > <fixed-scroller condensed :extra-padding-top="2"> <div ref="tablist" class="b-tabs__tab-list" role="tablist" @keydown="onKeydownTabsNavigation"> <button v-for="{ counter, disabled, errorCounter, hidden, id, title, withNotificationIndicator, setElementRef, } in tabs" v-show="!hidden" :id="id" :ref="setElementRef" :key="id" role="tab" type="button" class="b-tabs__tab" :class="{ 'b-tabs__tab--active': activeTabId === id, 'b-tabs__tab--disabled': disabled, }" :aria-controls="`${id}-tabpanel`" :aria-hidden="hidden ? 'true' : 'false'" :aria-selected="activeTabId === id ? 'true' : 'false'" :tabindex="activeTabId === id && !disabled.value ? null : -1" :disabled="isDisabled(disabled)" @click="handleTabChange(id)" @keydown.enter.space="handleTabChange(id)" > <span class="b-tabs__tab-text"> <bento-typography class="b-tabs__tab-title" el="span" variant="body" stronger> {{ title }} </bento-typography> <bento-typography v-if="counter != null" class="b-tabs__tab-counter" el="span" variant="body" stronger :class="{ 'b-tabs__tab-counter--active': activeTabId === id, }" > {{ counter }} </bento-typography> <bento-tag v-if="errorCounter != null" class="b-tabs__tab-error-counter" variant="red" :label="errorCounter.toString()" :aria-label="tc('errorCount', errorCounter)" > <template #icon> <cross-circle-fill-icon aria-hidden="true" /> </template> </bento-tag> <span v-if="withNotificationIndicator" class="b-tabs__tab-notification-dot" aria-hidden="true" ></span> </span> <span v-show="activeTabId === id" class="b-tabs__tab-underline" aria-hidden="true"></span> </button> </div> </fixed-scroller> </div> <slot /> </div> </template> <script lang="ts"> import { computed, defineComponent, nextTick, onUnmounted, type PropType, provide, ref, type Ref, unref, watch, } from 'vue'; // components import { BentoTypography } from '@/components/typography'; import { BentoTag } from '@/components/tag'; import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill'; import { FixedScroller } from '@/internal'; // utils import { useI18n } from '@/utils/ts/i18n'; import { generateUid } from '@/utils/ts/generate-uid'; import { getNextTabIndex, getPreviousTabIndex } from './utils'; import messages from './messages.json'; // types import { type Booleanish } from '@/types/prop-types'; import { type BentoTab } from './components/tab.internal.types'; import { type BentoStickyTabsOptions, BentoTabsEvent, type BentoTabsRegisterTab } from './tabs.types'; // keys import { TABS_ACTIVE_TAB_ID_KEY, TABS_REGISTER_TAB_INJECTION_KEY } from './tabs.keys'; type MessageSchema = (typeof messages)['en-US']; /** * Tabs are used to navigate between different, but related content views within a page. * This component conforms to the official WAI-ARIA guidelines for tabs: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/ * * @example * import { BentoTabs, BentoTab } from '@adyen/bento-vue2'; * * export default { * components: { BentoTabs, BentoTab }, * template: ` * <bento-tabs v-bind="$props"> * <bento-tab title="Maria Ahlefeldt"> * (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. * </bento-tab> * <bento-tab title="Carl Andersen"> * (29 April 1847 - 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen. * </bento-tab> * <bento-tab title="Karl Truffel"> * (1 March 1981 - 7 November 1992) was a Danish dog and commander born in Berlin, son of the machinist Tom Jahoor Truffel. * </bento-tab> * <bento-tab title="Maria Ahlefeldt" :disabled="true"> * (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. * </bento-tab> * </bento-tabs> * ` * }; */ // component export default defineComponent({ i18n: { messages }, name: 'bento-tabs', components: { BentoTag, BentoTypography, CrossCircleFillIcon, FixedScroller, }, props: { /** * Sets the active tab by its index (0 being the first tab item). */ activeTabIndex: { type: Number, default: 0 }, /* * Renders the tab with a sticky positioning. */ sticky: { type: Boolean, default: false }, /** * Additional configurable options for tabs rendered with a sticky positioning. * It must be an object of type {@see BentoStickyTabsOption} * @property {Ref<number>} stickyOptions.top - Top position the tabs should take up when rendered as sticky. */ stickyOptions: { type: Object as PropType<BentoStickyTabsOptions>, default: null }, }, emits: [BentoTabsEvent.ACTIVE_TAB_INDEX], setup(props, { emit }) { const { tc } = useI18n<{ message: MessageSchema }>({ messages }); const tabs: Ref<Array<BentoTab>> = ref([]); const tablist = ref(null); const tablistwrapper = ref(); const activeTabId = ref(''); const isPinnedByObserver = ref(false); let observer; provide(TABS_ACTIVE_TAB_ID_KEY, activeTabId); // unregister tab if removed / destroyed const unregisterTab = (tabIdToRemove: string) => () => { tabs.value = tabs.value?.filter(({ id }) => id !== tabIdToRemove); }; // register tab const registerTab: BentoTabsRegisterTab = ({ title, disabled, errorCounter, withNotificationIndicator, counter, hidden, setElementRef, }) => { const id = generateUid('b-tab'); // add tab to tabs tabs.value.push({ counter, disabled, errorCounter, hidden, id, title, withNotificationIndicator, setElementRef, }); // return values to the Tab component return { id, unregisterTab: unregisterTab(id) }; }; // provide activeTab and registerTab to tab items provide(TABS_REGISTER_TAB_INJECTION_KEY, registerTab); // keyboard navigation const onKeydownTabsNavigation = (e: KeyboardEvent) => { if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') { // find tab that is focussed const activeTab = tabs.value.find(tab => document.activeElement.id === tab.id); let activeTabIndex = tabs.value.indexOf(activeTab); // conditionally increase or decrease the if (e.code === 'ArrowLeft') { activeTabIndex = getPreviousTabIndex(activeTabIndex, tabs.value); } else if (e.code === 'ArrowRight') { activeTabIndex = getNextTabIndex(activeTabIndex, tabs.value); } // focus new active tab tablist.value.children[activeTabIndex].focus(); } }; watch( [() => props.activeTabIndex, tabs], ([index, currentTabs]) => { nextTick(() => { const tab = currentTabs[index]; activeTabId.value = tab && !tab.disabled ? tab.id : tabs.value.find(({ disabled }) => !disabled)?.id; }); }, { immediate: true } ); const handleTabChange = (tabId: string) => { activeTabId.value = tabId; const activeIndex = tabs.value.findIndex(({ id }) => id === activeTabId.value); emit(BentoTabsEvent.ACTIVE_TAB_INDEX, activeIndex); }; const isDisabled = (isDisabledTab: Ref<boolean>): Booleanish => (isDisabledTab ? 'disabled' : false) as Booleanish; /* == Sticky tabs logic == */ const topOffset = computed(() => (props.stickyOptions?.top ? unref(props.stickyOptions.top) : 0)); const isPinned = computed(() => { if (props.sticky && topOffset.value > 0) { return true; } return isPinnedByObserver.value; }); const disconnectObserver = () => { if (observer) { observer.disconnect(); observer = null; } isPinnedByObserver.value = false; }; const setupObserver = (element: HTMLDivElement) => { // The observer is only needed when the tabs are sticky at the top of the screen (no top offset). if (props.sticky && topOffset.value === 0) { observer = new IntersectionObserver( ([e]) => { isPinnedByObserver.value = e.intersectionRatio < 1; }, { threshold: [1] } ); observer.observe(element); } }; // This watcher manages the entire lifecycle of the observer. watch( [() => props.sticky, tablistwrapper, topOffset], ([isSticky, element]) => { disconnectObserver(); if (isSticky && element) { nextTick(() => setupObserver(element)); } }, { immediate: true } ); onUnmounted(() => { disconnectObserver(); }); const tablistWrapperConditionalClasses = computed(() => ({ 'b-tabs__tab-list-wrapper--sticky': props.sticky, 'b-tabs__tab-list-wrapper--pinned': isPinned.value, })); const tablistWrapperStyles = computed(() => // This helps us detect when the tabs are pinned without calculations on the tabs positions because it makes the tabs intersect by 1 pixel with the element on top of it, which is getting aught by the intersection observer. // Followed this example: https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/ props.sticky ? { top: `${(props.stickyOptions?.top ?? 0) - 1}px`, } : {} ); return { tc, tabs, tablist, tablistwrapper, activeTabId, tablistWrapperConditionalClasses, tablistWrapperStyles, onKeydownTabsNavigation, handleTabChange, isDisabled, }; }, }); </script> <style lang="scss" scoped src="./tabs.scss" /> 

package/dist/assets/components/tag/tag.docs.mdx

@@ -46,7 +46,7 @@ It accepts one of the following values:
 - `'green'`
 - `'orange'`
 - `'red'`
-- `'white'`
+- `'white'` (deprecated, use `'grey'` instead)
 
 <Canvas withSource="closed">
     <Story of={TagStories.AllVariantsTemplate} />

package/dist/assets/components/tag/tag.stories.ts

@@ -1 +1 @@
-import type { Meta, StoryObj } from '@storybook/vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import CheckmarkCircleFillIcon from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill'; import BentoTagWithIcon from './__tests__/tag-with-icon.vue?raw'; import BentoTag from './tag.vue'; import { isVue2 } from 'vue-demi'; import { BentoTagVariant } from './tag.types'; export default { title: 'Tag', component: BentoTag, parameters: { layout: 'centered', }, argTypes: { default: { name: 'default (deprecated)', defaultValue: '', description: 'Tag content slot (will be deprecated, use label property instead)', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text', }, }, variant: { options: Object.values(BentoTagVariant), mapping: BentoTagVariant, control: { type: 'select', }, }, }, } as Meta; type Story = StoryObj<typeof BentoTag>; const DEFAULT_TAG_PROPS = { label: 'Default Tag Text', }; const defaultCode = ` <bento-tag label="${DEFAULT_TAG_PROPS.label}" /> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoTag }, props: Object.keys(argTypes), template: ` <div style="display:flex; gap: 10px"> <bento-tag v-bind="args" /> </div> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: DEFAULT_TAG_PROPS, parameters: storybookDocsParameter(defaultCode), }; const truncatedCode = ` <bento-tag truncate="10" label="${DEFAULT_TAG_PROPS.label}" /> `; export const Truncated: Story = { render: (_args, { argTypes }) => ({ components: { BentoTag }, props: Object.keys(argTypes), template: ` <div style="display:flex; gap: 10px"> <bento-tag v-bind="args" /> </div> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { ...DEFAULT_TAG_PROPS, variant: 'green', truncate: 10 }, parameters: storybookDocsParameter(truncatedCode), }; export const WithIcon: Story = { render: (_args, { argTypes }) => ({ components: { BentoTag, CheckmarkCircleFillIcon }, props: Object.keys(argTypes), template: ` <div style="display:flex; gap: 10px"> <bento-tag v-bind="args"> <template #icon><checkmark-circle-fill-icon /></template> </bento-tag> </div> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: DEFAULT_TAG_PROPS, parameters: storybookDocsParameter(BentoTagWithIcon), }; const allVariantsCode = ` <div style="display:flex; gap: 10px"> <bento-tag variant="grey" label="Grey" /> <bento-tag variant="green" label="Green" /> <bento-tag variant="red" label="Red" /> <bento-tag variant="blue" label="Blue" /> <bento-tag variant="orange" label="Orange" /> <bento-tag variant="white" label="White" /> </div>`; export const AllVariantsTemplate: Story = { render: (_args, { argTypes }) => ({ components: { BentoTag }, props: Object.keys(argTypes), template: ` <div style="display:flex; gap: 10px"> <bento-tag variant="grey" v-bind="args" label="Grey" /> <bento-tag variant="green" v-bind="args" label="Green" /> <bento-tag variant="red" v-bind="args" label="Red" /> <bento-tag variant="blue" v-bind="args" label="Blue" /> <bento-tag variant="orange" v-bind="args" label="Orange" /> <bento-tag variant="white" v-bind="args" label="White" /> </div> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), parameters: storybookDocsParameter(allVariantsCode), }; 
+import type { Meta, StoryObj } from '@storybook/vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import CheckmarkCircleFillIcon from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill'; const TagAllVariantsTemplateExample = "<template>\n <div style=\"display: flex; gap: 10px\">\n <bento-tag variant=\"grey\" label=\"Grey\" />\n <bento-tag variant=\"green\" label=\"Green\" />\n <bento-tag variant=\"red\" label=\"Red\" />\n <bento-tag variant=\"blue\" label=\"Blue\" />\n <bento-tag variant=\"orange\" label=\"Orange\" />\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoTag } from '@adyen/bento-vue2';\n</script>\n"; const TagDefaultExample = "<template>\n <bento-tag label=\"Default Tag Text\" />\n</template>\n\n<script setup lang=\"ts\">\n import { BentoTag } from '@adyen/bento-vue2';\n</script>\n"; const TagTruncatedExample = "<template>\n <bento-tag label=\"Default Tag Text\" variant=\"green\" :truncate=\"10\" />\n</template>\n\n<script setup lang=\"ts\">\n import { BentoTag } from '@adyen/bento-vue2';\n</script>\n"; const BentoTagWithIcon = "<template>\n <!-- eslint-disable-next-line @adyen/bento/deprecation-tag-default-slot -- false positive: only named #icon slot, no default slot content -->\n <bento-tag label=\"With icon\">\n <template #icon><checkmark-circle-fill-icon aria-hidden=\"true\" /></template>\n </bento-tag>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoTag } from '@adyen/bento-vue2';\n import CheckmarkCircleFillIcon from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n</script>\n"; import BentoTag from './tag.vue'; import { isVue2 } from 'vue-demi'; import { BentoTagVariant } from './tag.types'; export default { title: 'Tag', component: BentoTag, parameters: { layout: 'centered', }, argTypes: { default: { name: 'default (deprecated)', defaultValue: '', description: 'Tag content slot (will be deprecated, use label property instead)', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text', }, }, variant: { options: Object.values(BentoTagVariant), mapping: BentoTagVariant, control: { type: 'select', labels: { white: 'DEPRECATED: white', }, }, }, }, } as Meta; type Story = StoryObj<typeof BentoTag>; const DEFAULT_TAG_PROPS = { label: 'Default Tag Text', }; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoTag }, props: Object.keys(argTypes), template: ` <div style="display:flex; gap: 10px"> <bento-tag v-bind="args" /> </div> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: DEFAULT_TAG_PROPS, parameters: storybookDocsParameter(TagDefaultExample), }; export const Truncated: Story = { render: (_args, { argTypes }) => ({ components: { BentoTag }, props: Object.keys(argTypes), template: ` <div style="display:flex; gap: 10px"> <bento-tag v-bind="args" /> </div> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { ...DEFAULT_TAG_PROPS, variant: 'green', truncate: 10 }, parameters: storybookDocsParameter(TagTruncatedExample), }; export const WithIcon: Story = { render: (_args, { argTypes }) => ({ components: { BentoTag, CheckmarkCircleFillIcon }, props: Object.keys(argTypes), template: ` <div style="display:flex; gap: 10px"> <bento-tag v-bind="args"> <template #icon><checkmark-circle-fill-icon /></template> </bento-tag> </div> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: DEFAULT_TAG_PROPS, parameters: storybookDocsParameter(BentoTagWithIcon), }; export const AllVariantsTemplate: Story = { render: (_args, { argTypes }) => ({ components: { BentoTag }, props: Object.keys(argTypes), template: ` <div style="display:flex; gap: 10px"> <bento-tag variant="grey" v-bind="args" label="Grey" /> <bento-tag variant="green" v-bind="args" label="Green" /> <bento-tag variant="red" v-bind="args" label="Red" /> <bento-tag variant="blue" v-bind="args" label="Blue" /> <bento-tag variant="orange" v-bind="args" label="Orange" /> </div> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), parameters: storybookDocsParameter(TagAllVariantsTemplateExample), }; 

package/dist/assets/components/tag/tag.types.ts

@@ -1 +1 @@
-export type BentoTagVariant = 'grey' | 'blue' | 'green' | 'orange' | 'red' | 'white'; /** * @deprecated Since v2.0.0. Use string literal instead. */ export const BentoTagVariant: Record<string, BentoTagVariant> = { GREY: 'grey', BLUE: 'blue', GREEN: 'green', ORANGE: 'orange', RED: 'red', WHITE: 'white', }; export interface BentoTagProps { /** * The label text content of the Tag. */ label?: string; /** * The number of characters to limit the number of displayed characters for the tag text, truncating it with an ellipsis of three dots "...". */ truncate?: number; /** * The variant variant of tag */ variant?: BentoTagVariant | `${BentoTagVariant}`; } 
+export type BentoTagVariant = 'grey' | 'blue' | 'green' | 'orange' | 'red' | 'white'; /** * @deprecated Since v3.0.0. Use string literal instead. */ export const BentoTagVariant: Record<string, BentoTagVariant> & { /** * @deprecated Since v3.0.0. Use the `grey` variant instead. */ WHITE: 'white'; } = { GREY: 'grey', BLUE: 'blue', GREEN: 'green', ORANGE: 'orange', RED: 'red', WHITE: 'white', }; export interface BentoTagProps { /** * The label text content of the Tag. */ label?: string; /** * The number of characters to limit the number of displayed characters for the tag text, truncating it with an ellipsis of three dots "...". */ truncate?: number; /** * The variant variant of tag */ variant?: BentoTagVariant | `${BentoTagVariant}`; } 

package/dist/assets/components/tag/tag.vue

@@ -1 +1 @@
-<template> <span v-bento-tooltip-directive="shouldShowTooltip ? textFromSlot : null" data-testid="tag" class="b-tag" :class="tagConditionalClasses" :aria-label="computedAriaLabel" > <div v-if="hasTextContent && hasSlot('icon')" class="b-tag__icon" role="presentation"> <slot name="icon"></slot> </div> <bento-typography class="b-tag__label" el="span" variant="caption" stronger> {{ formattedText }} </bento-typography> </span> </template> <script setup lang="ts"> import { computed, useSlots } from 'vue'; // Use relative paths otherwise the interface won't be correctly detected // TODO: Use alias once the support is added to work with the betterDefine macro import { type BentoTagProps, BentoTagVariant } from './tag.types'; import { BentoTypography } from '@/components/typography'; import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { getSlotText } from '@/utils/ts/get-slot-text'; const props = withDefaults(defineProps<BentoTagProps>(), { label: null, truncate: null, variant: BentoTagVariant.GREY, }); 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 hasTextContent = computed(() => !!(props.label || getSlotText(slots)('default'))); const computedAriaLabel = useAriaLabel({ label: props.label || getSlotText(slots)('default'), defaultFallback: 'tag', }); const tagConditionalClasses = computed(() => ({ [`b-tag--${props.variant}`]: props.variant, })); const textFromSlot = computed(() => props.label ?? getSlotText(slots)('default') ?? 'tag'); const shouldShowTooltip = computed(() => props.truncate && textFromSlot.value.length > props.truncate); const formattedText = computed(() => { if (!props.truncate) { return textFromSlot.value; } return shouldShowTooltip.value ? `${textFromSlot.value.slice(0, props.truncate)}...` : textFromSlot.value; }); </script> <script lang="ts"> export default { name: 'bento-tag', }; </script> <style lang="scss" scoped src="./tag.scss" /> 
+<template> <span v-bento-tooltip-directive="shouldShowTooltip ? textFromSlot : null" data-testid="tag" class="b-tag" :class="tagConditionalClasses" :aria-label="$attrs['aria-label'] || computedAriaLabel" > <div v-if="hasTextContent && hasSlot('icon')" class="b-tag__icon" role="presentation"> <slot name="icon"></slot> </div> <bento-typography class="b-tag__label" el="span" variant="caption" stronger> {{ formattedText }} </bento-typography> </span> </template> <script setup lang="ts"> import { computed, useSlots, watch } from 'vue'; // Use relative paths otherwise the interface won't be correctly detected // TODO: Use alias once the support is added to work with the betterDefine macro import { type BentoTagProps, BentoTagVariant } from './tag.types'; import { BentoTypography } from '@/components/typography'; import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { getSlotText } from '@/utils/ts/get-slot-text'; import { deprecate } from '@/utils/ts/deprecate'; const props = withDefaults(defineProps<BentoTagProps>(), { label: null, truncate: null, variant: BentoTagVariant.GREY, }); 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 hasTextContent = computed(() => !!(props.label || getSlotText(slots)('default'))); const computedAriaLabel = useAriaLabel({ label: props.label || getSlotText(slots)('default'), defaultFallback: 'tag', }); const tagConditionalClasses = computed(() => ({ [`b-tag--${props.variant}`]: props.variant, })); const textFromSlot = computed(() => props.label ?? getSlotText(slots)('default') ?? 'tag'); const shouldShowTooltip = computed(() => props.truncate && textFromSlot.value.length > props.truncate); const formattedText = computed(() => { if (!props.truncate) { return textFromSlot.value; } return shouldShowTooltip.value ? `${textFromSlot.value.slice(0, props.truncate)}...` : textFromSlot.value; }); watch( () => props.variant, variant => { if (variant === 'white') { deprecate('BentoTag "white" variant', 'Use the BentoTag "grey" variant instead.', '3.0.0'); } }, { immediate: true } ); </script> <script lang="ts"> export default { name: 'bento-tag', }; </script> <style lang="scss" scoped src="./tag.scss" /> 

package/dist/assets/components/textarea/textarea.docs.mdx

@@ -14,13 +14,6 @@ It's a complete form control including a label, input, icons and description tex
     <Story of={TextareaStories.Default} />
 </Canvas>
 
--   [Textarea](#textarea)
--   [Disabled](#disabled)
--   [Tooltip](#tooltip)
--   [Validation](#validation)
--   [Accessibility](#accessibility)
--   [Focus](#focus)
-
 ## Disabled
 
 The disabled property determines whether the input component is enabled or disabled.

package/dist/assets/components/textarea/textarea.stories.ts

@@ -1 +1 @@
-import { action } from '@storybook/addon-actions'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { type Meta, type StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; import BentoTextarea from './textarea.vue'; import { ref } from 'vue'; import { BentoTextareaResizeOption } from './textarea.types'; const meta: Meta = { title: 'Textarea', component: BentoTextarea, argTypes: { resizable: { options: Object.values(BentoTextareaResizeOption), mapping: BentoTextareaResizeOption, control: { type: 'select', }, }, input: { control: { disable: true }, table: { category: 'Deprecated' }, description: 'Deprecated since version 2.0. Use `v-model` or `update:model-value` instead', }, value: { control: { type: 'text' }, table: { category: 'Deprecated' }, description: 'Deprecated for usage with properties since version 2.0. Use `v-model` or `model-value` property instead', }, }, }; export default meta; type Story = StoryObj<typeof BentoTextarea>; const DEFAULT_TEXTAREA_PROPS = { description: 'Description', label: 'Label', placeholder: 'Enter text', clearable: true, optional: true, height: '', characterLimit: 100, }; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoTextarea }, props: Object.keys(argTypes), template: ` <bento-textarea v-bind="args" @blur="blurAction" @change="changeAction" @clear="clearAction" @focus="focusAction" @update:model-value="updateModelValueAction" @keydown="keydownAction" @keyup="keyupAction" /> `, setup(props) { const args = isVue2 ? props : _args; const textareaValue = ref(args.modelValue); const blurAction = (value: string) => action('blur')(value); const changeAction = (value: string) => action('change')(value); const focusAction = (value: string) => action('focus')(value); const updateModelValueAction = (value: string) => action('update:model-value')(value); const clearAction = () => { textareaValue.value = ''; action('clear')(); }; const keydownAction = ({ key, code }: KeyboardEvent) => action('keydown')({ key, code }); const keyupAction = ({ key, code }: KeyboardEvent) => action('keyup')({ key, code }); return { // Methods blurAction, clearAction, changeAction, focusAction, updateModelValueAction, keydownAction, keyupAction, // Values args, textareaValue, }; }, }), args: { ...DEFAULT_TEXTAREA_PROPS, }, parameters: storybookDocsParameter(` <bento-textarea :aria-label="string" :character-limit="number" :clearable="boolean" :description="string" :disabled="boolean" :error="boolean" :height="string" :label="string" :optional="boolean" :placeholder="string" :readonly="boolean" :resizable="boolean" :required="boolean" :model-value="textareaValue" @blur="blurAction" @change="changeAction" @clear="clearAction" @focus="focusAction" @update:model-value="modelValueUpdate" @keydown="keydownAction" @keyup="keyupAction" /> `), }; 
+import { action } from '@storybook/addon-actions'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { type Meta, type StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; const TextareaDefaultExample = "<template>\n <bento-textarea\n :model-value=\"textareaValue\"\n :character-limit=\"100\"\n clearable\n description=\"Description\"\n height=\"\"\n label=\"Label\"\n optional\n placeholder=\"Enter text\"\n @clear=\"textareaValue = ''\"\n @update:model-value=\"textareaValue = $event\"\n />\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import { BentoTextarea } from '@adyen/bento-vue2';\n\n const textareaValue = ref('');\n</script>\n"; import BentoTextarea from './textarea.vue'; import { ref } from 'vue'; import { BentoTextareaResizeOption } from './textarea.types'; const meta: Meta = { title: 'Textarea', component: BentoTextarea, argTypes: { resizable: { options: Object.values(BentoTextareaResizeOption), mapping: BentoTextareaResizeOption, control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoTextarea>; const DEFAULT_TEXTAREA_PROPS = { description: 'Description', label: 'Label', placeholder: 'Enter text', clearable: true, optional: true, height: '', characterLimit: 100, }; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoTextarea }, props: Object.keys(argTypes), template: ` <bento-textarea v-bind="args" @blur="blurAction" @change="changeAction" @clear="clearAction" @focus="focusAction" @update:model-value="updateModelValueAction" @keydown="keydownAction" @keyup="keyupAction" /> `, setup(props) { const args = isVue2 ? props : _args; const textareaValue = ref(args.modelValue); const blurAction = (value: string) => action('blur')(value); const changeAction = (value: string) => action('change')(value); const focusAction = (value: string) => action('focus')(value); const updateModelValueAction = (value: string) => action('update:model-value')(value); const clearAction = () => { textareaValue.value = ''; action('clear')(); }; const keydownAction = ({ key, code }: KeyboardEvent) => action('keydown')({ key, code }); const keyupAction = ({ key, code }: KeyboardEvent) => action('keyup')({ key, code }); return { // Methods blurAction, clearAction, changeAction, focusAction, updateModelValueAction, keydownAction, keyupAction, // Values args, textareaValue, }; }, }), args: { ...DEFAULT_TEXTAREA_PROPS, }, parameters: storybookDocsParameter(TextareaDefaultExample), }; 

package/dist/assets/components/textarea/textarea.types.ts

@@ -1 +1 @@
-import type { FormField } from '../../types/form-field'; /** * @deprecated Since v2.0.0. Use string literal instead. */ export enum BentoTextareaResizeOption { HORIZONTAL = 'horizontal', VERTICAL = 'vertical', BOTH = 'both', NONE = 'none', } export enum BentoTextareaStateClass { CLEARABLE = 'clearable', DISABLED = 'disabled', ERROR = 'error', READONLY = 'readonly', } export enum BentoTextareaEvent { BLUR = 'blur', CHANGE = 'change', CLEAR = 'clear', ESCAPE_PRESSED = 'escape-pressed', FOCUS = 'focus', INPUT = 'input', UPDATE_MODEL_VALUE = 'update:model-value', KEYDOWN = 'keydown', KEYUP = 'keyup', } export interface BentoTextareaProps extends FormField { /** * Text that labels the input element * @default undefined */ ariaLabel?: string; /** * Text that shows number of characters in textarea * @default undefined */ characterLimit?: number; /** * If set to true, shows a button to clear all the text * @default false */ clearable?: boolean; /** * Sets the height of the textarea, e.g 200px OR 20vh * @default null */ height?: string | null; /** * Indicates the possibility of resize the textarea. * Accepts the Enum or the string literal version. * @default BentoTextareaResizeOption.BOTH */ resizable?: BentoTextareaResizeOption | `${BentoTextareaResizeOption}`; /** * Text displayed as the value of the textarea * @deprecated Since v2.0.0. Use `v-model` or `model-value` instead. */ value?: string; /** * Text displayed as the value of the textarea */ modelValue?: string; } 
+import type { FormField } from '../../types/form-field'; /** * @deprecated Since v3.0.0. Use string literal instead. */ export enum BentoTextareaResizeOption { HORIZONTAL = 'horizontal', VERTICAL = 'vertical', BOTH = 'both', NONE = 'none', } export enum BentoTextareaStateClass { CLEARABLE = 'clearable', DISABLED = 'disabled', ERROR = 'error', READONLY = 'readonly', } export enum BentoTextareaEvent { BLUR = 'blur', CHANGE = 'change', CLEAR = 'clear', ESCAPE_PRESSED = 'escape-pressed', FOCUS = 'focus', INPUT = 'input', UPDATE_MODEL_VALUE = 'update:model-value', KEYDOWN = 'keydown', KEYUP = 'keyup', } export interface BentoTextareaProps extends FormField { /** * Text that labels the input element * @default undefined */ ariaLabel?: string; /** * Text that shows number of characters in textarea * @default undefined */ characterLimit?: number; /** * If set to true, shows a button to clear all the text * @default false */ clearable?: boolean; /** * Sets the height of the textarea, e.g 200px OR 20vh * @default null */ height?: string | null; /** * Indicates the possibility of resize the textarea. * Accepts the Enum or the string literal version. * @default BentoTextareaResizeOption.BOTH */ resizable?: BentoTextareaResizeOption | `${BentoTextareaResizeOption}`; /** * Text displayed as the value of the textarea */ modelValue?: string; } 

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" :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 v2.0.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 '@/utils/ts/generate-uid'; import { observeSizeOfElement } from '@/utils/ts/resize'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { useI18n } from '@/utils/ts/i18n'; 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, 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 */ (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); 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 ?? 0) > 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.modelValue, () => { textareaValue.value = props.modelValue; }, { 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 update:model-value * @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(); } }); 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', event: 'update:model-value' }, }; </script> <style lang="scss" scoped src="./textarea.scss" /> 

package/dist/assets/components/timeline/components/timeline-item/timeline-item.stories.ts

@@ -1 +1 @@
-import BentoTimelineItem from './timeline-item.vue'; import BentoTimeline from '../../timeline.vue'; import type { Meta, StoryObj } from '@storybook/vue'; import { BentoTimelineItemVariant } from '../../timeline.types'; import { isVue2 } from 'vue-demi'; import { BentoDateFormat } from '@/components/date'; const meta: Meta = { title: 'Timeline/Timeline Item', component: BentoTimelineItem, argTypes: { variant: { options: Object.keys(BentoTimelineItemVariant), mapping: BentoTimelineItemVariant, defaultValue: BentoTimelineItemVariant.DEFAULT, control: { type: 'select', }, table: { category: 'Deprecated' }, }, type: { control: { type: 'select', }, }, status: { control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoTimeline>; const DEFAULT_PROPS = { title: 'Milestone', timestamp: { date: new Date(), value: 'AuthorName', format: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD, }, dataList: [ { label: 'Label', value: 'Value' }, { label: 'Label', value: 'Value' }, ], description: 'Space to put some description about this milestone', tag: { label: 'Tag' }, status: 'black', }; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline> <bento-timeline-item v-bind="args" /> </bento-timeline> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { ...DEFAULT_PROPS, }, }; 
+import BentoTimelineItem from './timeline-item.vue'; import BentoTimeline from '../../timeline.vue'; import type { Meta, StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; import { BentoDateFormat } from '@/components/date'; const meta: Meta = { title: 'Timeline/Timeline Item', component: BentoTimelineItem, argTypes: { type: { control: { type: 'select', }, }, status: { control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoTimeline>; const DEFAULT_PROPS = { title: 'Milestone', timestamp: { date: new Date(), value: 'AuthorName', format: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD, }, dataList: [ { label: 'Label', value: 'Value' }, { label: 'Label', value: 'Value' }, ], description: 'Space to put some description about this milestone', tag: { label: 'Tag' }, status: 'black', }; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline> <bento-timeline-item v-bind="args" /> </bento-timeline> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { ...DEFAULT_PROPS, }, }; 

package/dist/assets/components/timeline/components/timeline-item/timeline-item.vue

@@ -1 +1 @@
-<template> <li v-if="isVisible" class="b-timeline-item" :class="conditionalClasses"> <div v-if="timegap" class="b-timeline-item__row"> <div class="b-timeline-item__marker" aria-hidden="true"> <div class="b-timeline-item__icon b-timeline-item__icon--timegap"></div> <div class="b-timeline-item__separator"></div> </div> <div class="b-timeline-item__content"> <bento-typography class="b-timeline-item__timegap" :aria-label="timegapAriaLabel"> {{ timegap }} </bento-typography> </div> </div> <div class="b-timeline-item__row"> <div class="b-timeline-item__marker" aria-hidden="true"> <square-small-icon class="b-timeline-item__icon" :class="iconConditionalClasses" /> <div v-if="!isLastItem" class="b-timeline-item__separator" data-testid="last-timeline-item-separator" ></div> </div> <div class="b-timeline-item__content"> <bento-typography v-if="!isNoteType" el="div" variant="body" strongest class="b-timeline-item__title" role="heading" aria-level="2" > <bento-link v-if="isLinkTitle" v-bind="linkTitleProps" disable-typography>{{ linkTitleProps.title }}</bento-link> <span v-else>{{ title }}</span> </bento-typography> <bento-typography v-if="isNoteType && (description || hasSlot('default'))" el="div" variant="body" class="b-timeline-item__description" > <slot>{{ description }}</slot> </bento-typography> <bento-typography v-if="timestamp" class="b-timeline-item__timestamp" el="div" variant="caption"> <bento-date :date="timestamp.date" :format="timestamp.format" disable-typography /> <bento-dashed-underline v-if="timestamp.description" v-bind="timestamp.description"> {{ timestamp.value }} </bento-dashed-underline> <span v-else>{{ timestamp.value }}</span> </bento-typography> <bento-typography v-if="!isNoteType && additionalTimestamp" class="b-timeline-item__timestamp" el="div" variant="caption" > <bento-date :date="additionalTimestamp.date" :format="additionalTimestamp.format" disable-typography /> <bento-dashed-underline v-if="additionalTimestamp.description" v-bind="additionalTimestamp.description" > {{ additionalTimestamp.value }} </bento-dashed-underline> <span v-else> {{ additionalTimestamp.value }} </span> </bento-typography> <bento-typography v-if="!isNoteType && (description || hasSlot('default'))" el="div" variant="body" class="b-timeline-item__description" > <slot>{{ description }}</slot> </bento-typography> <div v-if="!isNoteType && dataList" class="b-timeline-item__data-list"> <bento-structured-list> <bento-structured-list-item v-for="listEntry in dataList" :key="generateUid(listEntry.label)" :label="listEntry.label" > <bento-typography variant="caption">{{ listEntry.value }}</bento-typography> </bento-structured-list-item> </bento-structured-list> </div> <bento-tag v-if="!isNoteType && tag" v-bind="tag" class="b-timeline-item__tag" /> </div> </div> <div v-if="displayShowMoreButton" class="b-timeline-item__row"> <div class="b-timeline-item__marker" aria-hidden="true"> <div class="b-timeline-item__separator"></div> </div> <div class="b-timeline-item__content"> <bento-button class="b-timeline__show-more" variant="tertiary" @click="showAll = !showAll"> <template v-if="!showAll">{{ t('showMore', { items: hiddenItems }) }}</template> <template v-else>{{ t('showLess') }}</template> </bento-button> </div> </div> </li> </template> <script setup lang="ts"> import { computed, defineComponent, inject, onUnmounted, provide, useSlots } from 'vue'; // Components import { BentoButton } from '@/components/button'; import { BentoDashedUnderline } from '@/components/dashed-underline'; import { BentoDate } from '@/components/date'; import { BentoLink } from '@/components/link'; import { BentoTag } from '@/components/tag'; import { BentoTypography } from '@/components/typography'; import { BentoStructuredList, BentoStructuredListItem } from '@/components/structured-list'; import SquareSmallIcon from '@adyen/ui-assets-icons-16/vue/square-small-fill'; // Utils import { deprecate } from '@/utils/ts/deprecate'; import { generateUid } from '@/core/utils/ts'; import { useI18n } from '@/utils/ts/i18n'; import { useHasSlot } from '@/composables'; import { formatDistanceStrict } from 'date-fns/formatDistanceStrict'; // Types import { type BentoTimelineConfigData, type BentoTimelineEntry, type BentoTimelineItemProps, type BentoTimelineItemTitle, BentoTimelineItemVariant, type BentoTimelineRegisterEntry, } from '../../timeline.types'; // Keys import { TIMELINE_CONFIG_INJECTION_KEY, TIMELINE_REGISTER_ENTRY_INJECTION_KEY } from '../../timeline.keys'; import { STRUCTURED_LIST_CONDENSED_INJECTION_KEY } from '@/components/structured-list/structured-list.keys'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults(defineProps<BentoTimelineItemProps>(), { additionalTimestamp: null, dataList: null, description: null, status: 'black', tag: undefined, title: null, type: 'milestone', variant: null, }); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const slots = useSlots(); const hasSlot = useHasSlot(slots); const isNoteType = computed(() => props.type === 'note'); // Handle variant deprecation, by setting `critical` and `success` variants to their respective colors const computedStatus = computed(() => { if (props.variant === BentoTimelineItemVariant.CRITICAL) { return 'red'; } if (props.variant === BentoTimelineItemVariant.SUCCESS) { return 'green'; } return props.status; }); if (props.variant) { deprecate( 'BentoTimelineItem "variant" property', `Use the BentoTimelineItem "status" modifier instead to modify the color of the timeline icon. <bento-timeline-item status="red" />`, '2.0.0' ); } const iconConditionalClasses = computed(() => ({ [`b-timeline-item__icon--${computedStatus.value}`]: computedStatus.value && !isNoteType.value, })); const conditionalClasses = computed(() => ({ 'b-timeline-item--note': isNoteType.value, })); // Provide STRUCTURED_LIST_CONDENSED_INJECTION_KEY as true, to set the internal condensed style in the BentoStructuredList comp provide(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, true); const entry: BentoTimelineEntry = { title: props.title, date: props.timestamp.date, }; // Register timeline entry to the timeline entries array const registerTimelineEntry: BentoTimelineRegisterEntry = inject(TIMELINE_REGISTER_ENTRY_INJECTION_KEY); const { timelineEntries, unregisterTimelineEntry } = registerTimelineEntry(entry); // On unmounting timeline item, unregister it from the parent timeline component onUnmounted(() => unregisterTimelineEntry()); // Get timeline config data from the parent Timeline comp const { showAll, showMoreIndex, hiddenItems, visibleIndexes, timegapLimit }: BentoTimelineConfigData = inject(TIMELINE_CONFIG_INJECTION_KEY); const index = computed(() => timelineEntries.value.indexOf(entry)); const allItemsShowing = computed(() => showAll.value || !visibleIndexes.value); const isVisible = computed(() => (allItemsShowing.value ? true : visibleIndexes.value.includes(index.value))); const isLinkTitle = computed(() => typeof props.title === 'object'); const linkTitleProps = computed(() => props.title as BentoTimelineItemTitle); const timegap = computed(() => { if (!timegapLimit.value) { return null; } const previousDate = timelineEntries.value[index.value - 1]?.date; const isPreviousItemVisible = allItemsShowing.value || visibleIndexes.value.includes(index.value - 1); if (!previousDate || !isPreviousItemVisible) { return null; } const { date } = timelineEntries.value[index.value]; const timegapInSelectedUnit = parseInt( formatDistanceStrict(previousDate, date, { unit: timegapLimit.value.unit }), 10 ); return timegapLimit.value.amount < timegapInSelectedUnit ? formatDistanceStrict(previousDate, date, { roundingMethod: 'floor' }) : null; }); const timegapAriaLabel = computed(() => (timegap.value ? t('timegap', { timegap: timegap.value }) : '')); const displayShowMoreButton = computed(() => hiddenItems.value && showMoreIndex.value === index.value); const isLastItem = computed(() => { // The index can be -1 before the parent has had a chance to sort the array. return index.value !== -1 && index.value === timelineEntries.value.length - 1; }); </script> <script lang="ts"> /** * BentoTimelineItem renders each event in the Timeline component * * @example * import { BentoDateFormat, BentoTimelineItem } from '@adyen/bento-vue2'; * * export default { * components: { BentoTimelineItem }, * template: ` * <bento-timeline-item * title="Milestone" * :timestamp="{ date: new Date(), value: 'Created at', format: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD }" * :additional-timestamp="{ date: new Date(), value: 'Modified at' }" * description="Milestone description" * :data-list="[ * { label: 'Label', value: 'Value' }, * { label: 'Label', value: 'Value' }, * ]" * :tag="{ label: 'Tag'}" * /> * ` * } */ export default defineComponent({ name: 'bento-timeline-item', i18n: { messages }, }); </script> <style lang="scss" scoped src="./timeline-item.scss" /> 
+<template> <li v-if="isVisible" class="b-timeline-item" :class="conditionalClasses"> <div v-if="timegap" class="b-timeline-item__row"> <div class="b-timeline-item__marker" aria-hidden="true"> <div class="b-timeline-item__icon b-timeline-item__icon--timegap"></div> <div class="b-timeline-item__separator"></div> </div> <div class="b-timeline-item__content"> <bento-typography class="b-timeline-item__timegap" :aria-label="timegapAriaLabel"> {{ timegap }} </bento-typography> </div> </div> <div class="b-timeline-item__row"> <div class="b-timeline-item__marker" aria-hidden="true"> <square-small-icon class="b-timeline-item__icon" :class="iconConditionalClasses" /> <div v-if="!isLastItem" class="b-timeline-item__separator" data-testid="last-timeline-item-separator" ></div> </div> <div class="b-timeline-item__content"> <bento-typography v-if="!isNoteType" el="div" variant="body" strongest class="b-timeline-item__title" role="heading" aria-level="2" > <bento-link v-if="isLinkTitle" v-bind="linkTitleProps" disable-typography>{{ linkTitleProps.title }}</bento-link> <span v-else>{{ title }}</span> </bento-typography> <bento-typography v-if="isNoteType && (description || hasSlot('default'))" el="div" variant="body" class="b-timeline-item__description" > <slot>{{ description }}</slot> </bento-typography> <bento-typography v-if="timestamp" class="b-timeline-item__timestamp" el="div" variant="caption"> <bento-date :date="timestamp.date" :format="timestamp.format" disable-typography /> <bento-dashed-underline v-if="timestamp.description" v-bind="timestamp.description"> {{ timestamp.value }} </bento-dashed-underline> <span v-else>{{ timestamp.value }}</span> </bento-typography> <bento-typography v-if="!isNoteType && additionalTimestamp" class="b-timeline-item__timestamp" el="div" variant="caption" > <bento-date :date="additionalTimestamp.date" :format="additionalTimestamp.format" disable-typography /> <bento-dashed-underline v-if="additionalTimestamp.description" v-bind="additionalTimestamp.description" > {{ additionalTimestamp.value }} </bento-dashed-underline> <span v-else> {{ additionalTimestamp.value }} </span> </bento-typography> <bento-typography v-if="!isNoteType && (description || hasSlot('default'))" el="div" variant="body" class="b-timeline-item__description" > <slot>{{ description }}</slot> </bento-typography> <div v-if="!isNoteType && dataList" class="b-timeline-item__data-list"> <bento-structured-list> <bento-structured-list-item v-for="listEntry in dataList" :key="generateUid(listEntry.label)" :label="listEntry.label" > <bento-typography variant="caption">{{ listEntry.value }}</bento-typography> </bento-structured-list-item> </bento-structured-list> </div> <bento-tag v-if="!isNoteType && tag" v-bind="tag" class="b-timeline-item__tag" /> </div> </div> <div v-if="displayShowMoreButton" class="b-timeline-item__row"> <div class="b-timeline-item__marker" aria-hidden="true"> <div class="b-timeline-item__separator"></div> </div> <div class="b-timeline-item__content"> <bento-button class="b-timeline__show-more" variant="tertiary" @click="showAll = !showAll"> <template v-if="!showAll">{{ t('showMore', { items: hiddenItems }) }}</template> <template v-else>{{ t('showLess') }}</template> </bento-button> </div> </div> </li> </template> <script setup lang="ts"> import { computed, defineComponent, inject, onUnmounted, provide, useSlots } from 'vue'; // Components import { BentoButton } from '@/components/button'; import { BentoDashedUnderline } from '@/components/dashed-underline'; import { BentoDate } from '@/components/date'; import { BentoLink } from '@/components/link'; import { BentoTag } from '@/components/tag'; import { BentoTypography } from '@/components/typography'; import { BentoStructuredList, BentoStructuredListItem } from '@/components/structured-list'; import SquareSmallIcon from '@adyen/ui-assets-icons-16/vue/square-small-fill'; // Utils import { generateUid } from '@/utils/ts/generate-uid'; import { useI18n } from '@/utils/ts/i18n'; import { useHasSlot } from '@/composables'; import { formatDistanceStrict } from 'date-fns/formatDistanceStrict'; // Types import { type BentoTimelineConfigData, type BentoTimelineEntry, type BentoTimelineItemProps, type BentoTimelineItemTitle, } from '../../timeline.types'; import { type BentoTimelineRegisterEntry } from '../../timeline.internal.types'; // Keys import { TIMELINE_CONFIG_INJECTION_KEY, TIMELINE_REGISTER_ENTRY_INJECTION_KEY } from '../../timeline.keys'; import { STRUCTURED_LIST_CONDENSED_INJECTION_KEY } from '@/components/structured-list/structured-list.keys'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults(defineProps<BentoTimelineItemProps>(), { additionalTimestamp: null, dataList: null, description: null, status: 'black', tag: undefined, title: null, type: 'milestone', }); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const slots = useSlots(); const hasSlot = useHasSlot(slots); const isNoteType = computed(() => props.type === 'note'); const iconConditionalClasses = computed(() => ({ [`b-timeline-item__icon--${props.status}`]: props.status && !isNoteType.value, })); const conditionalClasses = computed(() => ({ 'b-timeline-item--note': isNoteType.value, })); // Provide STRUCTURED_LIST_CONDENSED_INJECTION_KEY as true, to set the internal condensed style in the BentoStructuredList comp provide(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, true); const entry: BentoTimelineEntry = { title: props.title, date: props.timestamp.date, }; // Register timeline entry to the timeline entries array const registerTimelineEntry: BentoTimelineRegisterEntry = inject(TIMELINE_REGISTER_ENTRY_INJECTION_KEY); const { timelineEntries, unregisterTimelineEntry } = registerTimelineEntry(entry); // On unmounting timeline item, unregister it from the parent timeline component onUnmounted(() => unregisterTimelineEntry()); // Get timeline config data from the parent Timeline comp const { showAll, showMoreIndex, hiddenItems, visibleIndexes, timegapLimit }: BentoTimelineConfigData = inject(TIMELINE_CONFIG_INJECTION_KEY); const index = computed(() => timelineEntries.value.indexOf(entry)); const allItemsShowing = computed(() => showAll.value || !visibleIndexes.value); const isVisible = computed(() => (allItemsShowing.value ? true : visibleIndexes.value.includes(index.value))); const isLinkTitle = computed(() => typeof props.title === 'object'); const linkTitleProps = computed(() => props.title as BentoTimelineItemTitle); const timegap = computed(() => { if (!timegapLimit.value) { return null; } const previousDate = timelineEntries.value[index.value - 1]?.date; const isPreviousItemVisible = allItemsShowing.value || visibleIndexes.value.includes(index.value - 1); if (!previousDate || !isPreviousItemVisible) { return null; } const { date } = timelineEntries.value[index.value]; const timegapInSelectedUnit = parseInt( formatDistanceStrict(previousDate, date, { unit: timegapLimit.value.unit }), 10 ); return timegapLimit.value.amount < timegapInSelectedUnit ? formatDistanceStrict(previousDate, date, { roundingMethod: 'floor' }) : null; }); const timegapAriaLabel = computed(() => (timegap.value ? t('timegap', { timegap: timegap.value }) : '')); const displayShowMoreButton = computed(() => hiddenItems.value && showMoreIndex.value === index.value); const isLastItem = computed(() => { // The index can be -1 before the parent has had a chance to sort the array. return index.value !== -1 && index.value === timelineEntries.value.length - 1; }); </script> <script lang="ts"> /** * BentoTimelineItem renders each event in the Timeline component * * @example * import { BentoDateFormat, BentoTimelineItem } from '@adyen/bento-vue2'; * * export default { * components: { BentoTimelineItem }, * template: ` * <bento-timeline-item * title="Milestone" * :timestamp="{ date: new Date(), value: 'Created at', format: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD }" * :additional-timestamp="{ date: new Date(), value: 'Modified at' }" * description="Milestone description" * :data-list="[ * { label: 'Label', value: 'Value' }, * { label: 'Label', value: 'Value' }, * ]" * :tag="{ label: 'Tag'}" * /> * ` * } */ export default defineComponent({ name: 'bento-timeline-item', i18n: { messages }, }); </script> <style lang="scss" scoped src="./timeline-item.scss" /> 

package/dist/assets/components/timeline/timeline.docs.mdx

@@ -21,16 +21,6 @@ separate components.
 
 ## Variations
 
-### Variant (deprecated)
-
-> ⚠️ **Deprecation Notice**: Timeline item variants are deprecated and will be removed in release **2.0.0**. Use
-> [`status` modifier](#status) instead.
-
-There are three variants for the Timeline items: `Default`, `Success` and `Critical`.
-
-Use `Success` and `Critical` item variants sparingly - only when it's necessary to grab user's attention, for example,
-when the timeline is used for troubleshooting. Otherwise stick to the default styling.
-
 ### Links
 
 It’s possible to add links to either title or description of a timeline item. To make the timeline item title render as

package/dist/assets/components/timeline/timeline.internal.types.ts

@@ -0,0 +1 @@
+import { type Ref } from 'vue'; import { type BentoTimelineEntry, type BentoTimelineItemTitle } from './timeline.types'; /** * @deprecated Since v3.0.0. Do not use. */ export type BentoTimelineRegisterEntry = (props: { title?: string | BentoTimelineItemTitle; description?: string; date: Date | number; }) => { timelineEntries: Ref<Array<BentoTimelineEntry>>; index: number; unregisterTimelineEntry: () => void }; export type BentoInternalTimelineRegisterEntry = ( entry: BentoTimelineEntry ) => { timelineEntries: Ref<Array<BentoTimelineEntry>>; unregisterTimelineEntry: () => void }; 

package/dist/assets/components/timeline/timeline.stories.ts

@@ -1 +1 @@
-import type { Meta, StoryObj } from '@storybook/vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { onMounted, ref } from 'vue'; import { isVue2 } from 'vue-demi'; import BentoTimeline from './timeline.vue'; import BentoTimelineItem from './components/timeline-item/timeline-item.vue'; import { BentoTimelineGapUnit, BentoTimelineShowMorePlacement } from './timeline.types'; import TimelineDynamicAddition from './__tests__/timeline-dynamic-add-stub.vue?raw'; import TimelineDefaultExample from './__tests__/timeline-default-example.vue?raw'; import { BentoDateFormat } from '@/components/date/date.types'; import BentoLink from '@/components/link/link.vue'; import BentoButton from '@/components/button/button.vue'; const meta: Meta = { title: 'Timeline', component: BentoTimeline, argTypes: { // Slots default: { name: 'default', type: { name: 'string', required: false }, description: 'BentoTimelineItem components', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, }, }; export default meta; type Story = StoryObj<typeof BentoTimeline>; const DEFAULT_PROPS = { timegapLimit: { unit: BentoTimelineGapUnit.DAY, amount: 15 }, showMore: { limit: 3, placement: BentoTimelineShowMorePlacement.AFTER_FIRST }, }; const DEFAULT_ITEM_PROPS = { timestamp: { date: new Date(), value: 'AuthorName', format: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD, }, dataList: [ { label: 'Label', value: 'Value' }, { label: 'Label', value: 'Value' }, ], description: 'Space to put some description about this milestone', }; const { description: _, ...DEFAULT_PROPS_WITHOUT_DESCRIPTION } = DEFAULT_ITEM_PROPS; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline v-bind="args"> <bento-timeline-item v-bind="milestone5" /> <bento-timeline-item v-bind="milestone4" /> <bento-timeline-item v-bind="milestone3" /> <bento-timeline-item v-bind="milestone2" /> <bento-timeline-item v-bind="milestone1" /> </bento-timeline> `, setup(props) { const milestone5 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 5', status: 'green', }; const milestone4 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 4', timestamp: { date: new Date().setDate(-2), value: 'AuthorName', }, }; const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 3', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, status: 'red', }; const milestone2 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-14), value: 'BookingDate', description: { popoverText: 'date of booking', }, }, additionalTimestamp: { date: new Date().setDate(-15), value: 'ValueDate', description: { tooltipText: 'date of value', }, }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; return { args: isVue2 ? props : _args, milestone1, milestone2, milestone3, milestone4, milestone5, }; }, }), args: { ...DEFAULT_PROPS, }, parameters: storybookDocsParameter(TimelineDefaultExample), }; export const WithLinks: Story = { render: (_args, { argTypes }) => ({ components: { BentoLink, BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline v-bind="args"> <bento-timeline-item v-bind="milestone3" /> <bento-timeline-item v-bind="milestone2"> A description with <bento-link to="/">a link</bento-link> </bento-timeline-item> <bento-timeline-item v-bind="milestone1" /> </bento-timeline> `, setup(props) { const milestone3 = { ...DEFAULT_ITEM_PROPS, title: { title: 'Milestone 3', to: '/', }, timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, status: 'green', }; const milestone2 = { ...DEFAULT_PROPS_WITHOUT_DESCRIPTION, title: 'Milestone 2', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-15), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; return { args: isVue2 ? props : _args, milestone1, milestone2, milestone3, }; }, }), args: { ...DEFAULT_PROPS, }, }; const withNotesCode = ` <template> <bento-timeline v-bind="args" @add-timeline-note="addNote"> <bento-timeline-item v-for="item in timelineItems" v-bind="item" /> </bento-timeline> </template> <script setup> const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-5), value: 'AuthorName', }, }; const milestone2 = { type: 'note', description: 'Milestone Note. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; const timelineItems = ref(); onMounted(() => { timelineItems.value = [milestone3, milestone2, milestone1]; }); const addNote = e => { timelineItems.value.unshift(e); }; return { args: isVue2 ? props : _args, timelineItems, addNote, }; </script> `; export const WithNotes: Story = { render: (_args, { argTypes }) => ({ components: { BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline v-bind="args"> <bento-timeline-item v-bind="milestone3" /> <bento-timeline-item v-bind="milestone2" /> <bento-timeline-item v-bind="milestone1" /> </bento-timeline> `, setup(props) { const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-5), value: 'AuthorName', }, }; const milestone2 = { type: 'note', description: 'Milestone Note. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; return { args: isVue2 ? props : _args, milestone1, milestone2, milestone3, }; }, }), args: { ...DEFAULT_PROPS, showMore: null, }, parameters: storybookDocsParameter(withNotesCode), }; const addNoteCode = ` <template> <bento-timeline v-bind="args" add-note @add-timeline-note="addNote"> <bento-timeline-item v-for="item in timelineItems" v-bind="item" /> </bento-timeline> </template> <script setup> const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-5), value: 'AuthorName', }, }; const milestone2 = { type: 'note', description: 'Milestone Note. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; const timelineItems = ref(); onMounted(() => { timelineItems.value = [milestone3, milestone2, milestone1]; }); const addNote = e => { timelineItems.value.unshift(e); }; return { timelineItems, addNote, }; </script> `; export const AddNote: Story = { render: (_args, { argTypes }) => ({ components: { BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline v-bind="args" add-note @add-timeline-note="addNote"> <bento-timeline-item v-for="item in timelineItems" v-bind="item" /> </bento-timeline> `, setup(props) { const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-5), value: 'AuthorName', }, }; const milestone2 = { type: 'note', description: 'Milestone Note. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; const timelineItems = ref(); onMounted(() => { timelineItems.value = [milestone3, milestone2, milestone1]; }); const addNote = e => { const newNote = { ...e, timestamp: { ...e.timestamp, value: 'AuthorName' } }; timelineItems.value.unshift(newNote); }; return { args: isVue2 ? props : _args, timelineItems, addNote, }; }, }), args: { ...DEFAULT_PROPS, showMore: null, addNotes: true, }, parameters: storybookDocsParameter(addNoteCode), }; export const DynamicItemAddition: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <div style="display: flex; flex-direction: row; align-items: flex-start; gap: 16px;"> <bento-button @click="addItem">Add timeline item</bento-button> <bento-timeline v-if="timelineEntries"> <bento-timeline-item v-for="entry in timelineEntries" :key="entry.title" v-bind="entry" /> </bento-timeline> </div> `, setup(props) { const timelineEntries = ref([]); let index = 0; const addItem = () => { if (index < 5) { timelineEntries.value.unshift(milestones[index]); index++; } }; const milestone5 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 5', status: 'green', }; const milestone4 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 4', timestamp: { date: new Date().setDate(-2), value: 'AuthorName', }, }; const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 3', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, status: 'red', }; const milestone2 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-15), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; const milestones = [milestone1, milestone2, milestone3, milestone4, milestone5]; return { args: isVue2 ? props : _args, timelineEntries, addItem, }; }, }), args: { ...DEFAULT_PROPS, }, parameters: storybookDocsParameter(TimelineDynamicAddition), }; 
+import type { Meta, StoryObj } from '@storybook/vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { onMounted, ref } from 'vue'; import { isVue2 } from 'vue-demi'; import BentoTimeline from './timeline.vue'; import BentoTimelineItem from './components/timeline-item/timeline-item.vue'; import { BentoTimelineGapUnit, BentoTimelineShowMorePlacement } from './timeline.types'; const TimelineAddNoteExample = "<template>\n <bento-timeline add-note :timegap-limit=\"timegapLimit\" @add-timeline-note=\"addNote\">\n <bento-timeline-item v-for=\"item in timelineItems\" :key=\"item.timestamp.date.valueOf()\" v-bind=\"item\" />\n </bento-timeline>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import {\n BentoTimeline,\n BentoTimelineGapUnit,\n BentoTimelineItem,\n type BentoTimelineItemProps,\n } from '@adyen/bento-vue2';\n\n const timegapLimit = { unit: BentoTimelineGapUnit.DAY, amount: 15 };\n const defaultItemProps = {\n timestamp: {\n date: new Date('2024-03-15T10:00:00Z'),\n value: 'AuthorName',\n },\n dataList: [\n { label: 'Label', value: 'Value' },\n { label: 'Label', value: 'Value' },\n ],\n description: 'Space to put some description about this milestone',\n };\n\n const timelineItems = ref<Array<BentoTimelineItemProps>>([\n {\n ...defaultItemProps,\n title: 'Milestone 2',\n timestamp: {\n date: new Date('2024-03-11T10:00:00Z'),\n value: 'AuthorName',\n },\n additionalTimestamp: {\n date: new Date('2024-03-10T10:00:00Z'),\n value: 'AuthorName',\n },\n },\n {\n type: 'note',\n description:\n 'Milestone Note. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n timestamp: {\n date: new Date('2024-03-01T10:00:00Z'),\n value: 'AuthorName',\n },\n },\n {\n ...defaultItemProps,\n title: 'Milestone 1',\n timestamp: {\n date: new Date('2023-10-17T10:00:00Z'),\n value: 'AuthorName',\n },\n tag: {\n label: 'Tag1',\n },\n },\n ]);\n\n const addNote = (note: BentoTimelineItemProps) => {\n timelineItems.value.unshift({\n ...note,\n timestamp: {\n ...note.timestamp,\n date: new Date('2024-03-16T10:00:00Z'),\n value: 'AuthorName',\n },\n });\n };\n</script>\n"; const TimelineDynamicAddition = "<template>\n <div>\n <bento-timeline>\n <bento-timeline-item v-for=\"event in timelineEntries\" :key=\"event.title\" v-bind=\"event\" />\n </bento-timeline>\n <bento-button @click=\"addEntry\">Add timeline item</bento-button>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import BentoTimeline from '../timeline.vue';\n import BentoTimelineItem from '../components/timeline-item/timeline-item.vue';\n import { BentoButton } from '@/components/button';\n\n const timelineEntries = ref([]);\n const milestones = [\n { title: 'Milestone 1', timestamp: { date: new Date(2023, 0, 1) } },\n { title: 'Milestone 2', timestamp: { date: new Date(2023, 1, 1) } },\n { title: 'Milestone 3', timestamp: { date: new Date(2023, 2, 1) } },\n ];\n let milestoneIndex = 0;\n\n const addEntry = () => {\n if (milestoneIndex < milestones.length) {\n timelineEntries.value.unshift(milestones[milestoneIndex]);\n milestoneIndex++;\n }\n };\n</script>\n"; const TimelineDefaultExample = "<template>\n <bento-timeline v-bind=\"timelineProps\">\n <bento-timeline-item v-bind=\"milestone5\" />\n <bento-timeline-item v-bind=\"milestone4\" />\n <bento-timeline-item v-bind=\"milestone3\" />\n <bento-timeline-item v-bind=\"milestone2\" />\n <bento-timeline-item v-bind=\"milestone1\" />\n </bento-timeline>\n</template>\n\n<script lang=\"ts\" setup>\n import {\n BentoTimeline,\n BentoTimelineGapUnit,\n BentoTimelineItem,\n BentoTimelineShowMorePlacement,\n } from '@adyen/bento-vue2';\n\n const timelineProps = {\n timegapLimit: { unit: BentoTimelineGapUnit.DAY, amount: 15 },\n showMore: { limit: 3, placement: BentoTimelineShowMorePlacement.AFTER_FIRST },\n };\n\n const DEFAULT_ITEM_PROPS = {\n timestamp: {\n date: new Date('2024-03-15T10:00:00Z'),\n value: 'AuthorName',\n },\n dataList: [\n { label: 'Label', value: 'Value' },\n { label: 'Label', value: 'Value' },\n ],\n description: 'Space to put some description about this milestone',\n };\n\n const milestone5 = {\n ...DEFAULT_ITEM_PROPS,\n title: 'Milestone 5',\n status: 'green',\n };\n\n const milestone4 = {\n ...DEFAULT_ITEM_PROPS,\n title: 'Milestone 4',\n timestamp: {\n ...DEFAULT_ITEM_PROPS.timestamp,\n date: new Date('2024-03-13T10:00:00Z'),\n value: 'AuthorName',\n },\n };\n\n const milestone3 = {\n ...DEFAULT_ITEM_PROPS,\n title: 'Milestone 3',\n timestamp: {\n ...DEFAULT_ITEM_PROPS.timestamp,\n date: new Date('2024-03-11T10:00:00Z'),\n value: 'AuthorName',\n },\n status: 'red',\n };\n\n const milestone2 = {\n ...DEFAULT_ITEM_PROPS,\n title: 'Milestone 2',\n timestamp: {\n ...DEFAULT_ITEM_PROPS.timestamp,\n date: new Date('2024-03-01T10:00:00Z'),\n value: 'BookingDate',\n description: {\n popoverText: 'date of booking',\n },\n },\n additionalTimestamp: {\n date: new Date('2024-02-29T10:00:00Z'),\n value: 'ValueDate',\n description: {\n tooltipText: 'date of value',\n },\n },\n };\n\n const milestone1 = {\n ...DEFAULT_ITEM_PROPS,\n title: 'Milestone 1',\n timestamp: {\n ...DEFAULT_ITEM_PROPS.timestamp,\n date: new Date('2023-10-17T10:00:00Z'),\n value: 'AuthorName',\n },\n tag: {\n label: 'Tag1',\n },\n };\n</script>\n"; const TimelineWithNotesExample = "<template>\n <bento-timeline :timegap-limit=\"timegapLimit\">\n <bento-timeline-item v-for=\"item in timelineItems\" :key=\"item.timestamp.date.valueOf()\" v-bind=\"item\" />\n </bento-timeline>\n</template>\n\n<script setup lang=\"ts\">\n import {\n BentoTimeline,\n BentoTimelineGapUnit,\n BentoTimelineItem,\n type BentoTimelineItemProps,\n } from '@adyen/bento-vue2';\n\n const timegapLimit = { unit: BentoTimelineGapUnit.DAY, amount: 15 };\n const defaultItemProps = {\n timestamp: {\n date: new Date('2024-03-15T10:00:00Z'),\n value: 'AuthorName',\n },\n dataList: [\n { label: 'Label', value: 'Value' },\n { label: 'Label', value: 'Value' },\n ],\n description: 'Space to put some description about this milestone',\n };\n\n const timelineItems: Array<BentoTimelineItemProps> = [\n {\n ...defaultItemProps,\n title: 'Milestone 2',\n timestamp: {\n date: new Date('2024-03-11T10:00:00Z'),\n value: 'AuthorName',\n },\n additionalTimestamp: {\n date: new Date('2024-03-10T10:00:00Z'),\n value: 'AuthorName',\n },\n },\n {\n type: 'note',\n description:\n 'Milestone Note. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n timestamp: {\n date: new Date('2024-03-01T10:00:00Z'),\n value: 'AuthorName',\n },\n },\n {\n ...defaultItemProps,\n title: 'Milestone 1',\n timestamp: {\n date: new Date('2023-10-17T10:00:00Z'),\n value: 'AuthorName',\n },\n tag: {\n label: 'Tag1',\n },\n },\n ];\n</script>\n"; import { BentoDateFormat } from '@/components/date/date.types'; import BentoLink from '@/components/link/link.vue'; import BentoButton from '@/components/button/button.vue'; const meta: Meta = { title: 'Timeline', component: BentoTimeline, argTypes: { // Slots default: { name: 'default', type: { name: 'string', required: false }, description: 'BentoTimelineItem components', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, }, }; export default meta; type Story = StoryObj<typeof BentoTimeline>; const DEFAULT_PROPS = { timegapLimit: { unit: BentoTimelineGapUnit.DAY, amount: 15 }, showMore: { limit: 3, placement: BentoTimelineShowMorePlacement.AFTER_FIRST }, }; const DEFAULT_ITEM_PROPS = { timestamp: { date: new Date(), value: 'AuthorName', format: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD, }, dataList: [ { label: 'Label', value: 'Value' }, { label: 'Label', value: 'Value' }, ], description: 'Space to put some description about this milestone', }; const { description: _, ...DEFAULT_PROPS_WITHOUT_DESCRIPTION } = DEFAULT_ITEM_PROPS; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline v-bind="args"> <bento-timeline-item v-bind="milestone5" /> <bento-timeline-item v-bind="milestone4" /> <bento-timeline-item v-bind="milestone3" /> <bento-timeline-item v-bind="milestone2" /> <bento-timeline-item v-bind="milestone1" /> </bento-timeline> `, setup(props) { const milestone5 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 5', status: 'green', }; const milestone4 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 4', timestamp: { date: new Date().setDate(-2), value: 'AuthorName', }, }; const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 3', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, status: 'red', }; const milestone2 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-14), value: 'BookingDate', description: { popoverText: 'date of booking', }, }, additionalTimestamp: { date: new Date().setDate(-15), value: 'ValueDate', description: { tooltipText: 'date of value', }, }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; return { args: isVue2 ? props : _args, milestone1, milestone2, milestone3, milestone4, milestone5, }; }, }), args: { ...DEFAULT_PROPS, }, parameters: storybookDocsParameter(TimelineDefaultExample), }; export const WithLinks: Story = { render: (_args, { argTypes }) => ({ components: { BentoLink, BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline v-bind="args"> <bento-timeline-item v-bind="milestone3" /> <bento-timeline-item v-bind="milestone2"> A description with <bento-link to="/">a link</bento-link> </bento-timeline-item> <bento-timeline-item v-bind="milestone1" /> </bento-timeline> `, setup(props) { const milestone3 = { ...DEFAULT_ITEM_PROPS, title: { title: 'Milestone 3', to: '/', }, timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, status: 'green', }; const milestone2 = { ...DEFAULT_PROPS_WITHOUT_DESCRIPTION, title: 'Milestone 2', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-15), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; return { args: isVue2 ? props : _args, milestone1, milestone2, milestone3, }; }, }), args: { ...DEFAULT_PROPS, }, }; export const WithNotes: Story = { render: (_args, { argTypes }) => ({ components: { BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline v-bind="args"> <bento-timeline-item v-bind="milestone3" /> <bento-timeline-item v-bind="milestone2" /> <bento-timeline-item v-bind="milestone1" /> </bento-timeline> `, setup(props) { const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-5), value: 'AuthorName', }, }; const milestone2 = { type: 'note', description: 'Milestone Note. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; return { args: isVue2 ? props : _args, milestone1, milestone2, milestone3, }; }, }), args: { ...DEFAULT_PROPS, showMore: null, }, parameters: storybookDocsParameter(TimelineWithNotesExample), }; export const AddNote: Story = { render: (_args, { argTypes }) => ({ components: { BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline v-bind="args" add-note @add-timeline-note="addNote"> <bento-timeline-item v-for="item in timelineItems" v-bind="item" /> </bento-timeline> `, setup(props) { const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-5), value: 'AuthorName', }, }; const milestone2 = { type: 'note', description: 'Milestone Note. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; const timelineItems = ref(); onMounted(() => { timelineItems.value = [milestone3, milestone2, milestone1]; }); const addNote = e => { const newNote = { ...e, timestamp: { ...e.timestamp, value: 'AuthorName' } }; timelineItems.value.unshift(newNote); }; return { args: isVue2 ? props : _args, timelineItems, addNote, }; }, }), args: { ...DEFAULT_PROPS, showMore: null, addNote: true, }, parameters: storybookDocsParameter(TimelineAddNoteExample), }; export const DynamicItemAddition: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <div style="display: flex; flex-direction: row; align-items: flex-start; gap: 16px;"> <bento-button @click="addItem">Add timeline item</bento-button> <bento-timeline v-if="timelineEntries"> <bento-timeline-item v-for="entry in timelineEntries" :key="entry.title" v-bind="entry" /> </bento-timeline> </div> `, setup(props) { const timelineEntries = ref([]); let index = 0; const addItem = () => { if (index < 5) { timelineEntries.value.unshift(milestones[index]); index++; } }; const milestone5 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 5', status: 'green', }; const milestone4 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 4', timestamp: { date: new Date().setDate(-2), value: 'AuthorName', }, }; const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 3', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, status: 'red', }; const milestone2 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-15), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; const milestones = [milestone1, milestone2, milestone3, milestone4, milestone5]; return { args: isVue2 ? props : _args, timelineEntries, addItem, }; }, }), args: { ...DEFAULT_PROPS, }, parameters: storybookDocsParameter(TimelineDynamicAddition), };