@bethinkpl/design-system 18.6.0 → 18.7.1

package/docs/project.json

@@ -1 +1 @@
-{"generatedAt":1694783012328,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"5.0.4"},"packageManager":{"type":"yarn","version":"1.22.19"},"storybookVersion":"6.5.13","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.13"},"@storybook/manager-webpack5":{"version":"6.5.13"},"@storybook/vue3":{"version":"6.5.13"},"eslint-plugin-storybook":{"version":"0.6.6"}},"framework":{"name":"vue3"},"addons":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-controls":{"version":"6.5.15"},"@storybook/addon-storysource":{"version":"6.5.15"},"@storybook/addon-viewport":{"version":"6.5.15"},"storybook-addon-designs":{"version":"6.3.1"}}}
+{"generatedAt":1696404157704,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"5.0.4"},"packageManager":{"type":"yarn","version":"1.22.19"},"storybookVersion":"6.5.13","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.13"},"@storybook/manager-webpack5":{"version":"6.5.13"},"@storybook/vue3":{"version":"6.5.13"},"eslint-plugin-storybook":{"version":"0.6.6"}},"framework":{"name":"vue3"},"addons":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-controls":{"version":"6.5.15"},"@storybook/addon-storysource":{"version":"6.5.15"},"@storybook/addon-viewport":{"version":"6.5.15"},"storybook-addon-designs":{"version":"6.3.1"}}}

package/jest.config.js

@@ -6,6 +6,7 @@ module.exports = {
 		'^design-system/lib/(.*)$': '<rootDir>/lib/$1',
 		'^design-system/styles/(.*)$': '<rootDir>/lib/styles/$1',
 		'^design-system/images/(.*)$': '<rootDir>/lib/images/$1',
+		'^vue-popperjs/dist/vue-popper.css': '<rootDir>/lib/js/tests/emptyModule.ts',
 	},
 	testMatch: ['<rootDir>/lib/js/**/*.spec.ts', '<rootDir>/tools/importers/*.spec.ts'],
 	transform: {

package/lib/js/components/Dropdown/Dropdown.stories.ts

@@ -20,18 +20,23 @@ const StoryTemplate: StoryFn<typeof Dropdown> = (args) => ({
 		return { ...args };
 	},
 	template: `
-			<div style="position: relative">
-			<dropdown :trigger-action="triggerAction" :force-show="forceShow" :same-width="sameWidth" :radius="radius"
-								:placement="placement">
-				<template #reference><span>Dropdown entry point</span></template>
-				<template #default="{ close }">
-					<select-list>
-						<select-list-item label="One" @click.native="close" />
-						<select-list-item label="Two" @click.native="close" />
-					</select-list>
-				</template>
-			</dropdown>
-			</div>`,
+    <div style="position: relative">
+      <dropdown :trigger-action="triggerAction"
+                :force-show="forceShow"
+                :same-width="sameWidth"
+                :radius="radius"
+                :placement="placement"
+                :max-height="maxHeight">
+        <template #reference="{ isOpened }"><span>Dropdown entry point {{ isOpened ? 'opened' : 'closed' }}</span>
+        </template>
+        <template #default="{ close }">
+          <select-list>
+            <select-list-item label="One" @click.native="close" />
+            <select-list-item label="Two" @click.native="close" />
+          </select-list>
+        </template>
+      </dropdown>
+    </div>`,
 });
 
 export const Interactive = StoryTemplate.bind({});
@@ -41,6 +46,7 @@ const args = {
 	radius: DROPDOWN_RADIUSES.BOTH,
 	forceShow: false,
 	sameWidth: false,
+	maxHeight: '',
 } as Args;
 
 const argTypes = {
@@ -56,6 +62,10 @@ const argTypes = {
 		control: { type: 'select', options: Object.values(DROPDOWN_PLACEMENTS) },
 		defaultValue: DROPDOWN_PLACEMENTS.BOTTOM_START,
 	},
+	maxHeight: {
+		control: { type: 'text' },
+		defaultValue: '',
+	},
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;

package/lib/js/components/Dropdown/Dropdown.vue

@@ -9,8 +9,8 @@
 		:trigger="triggerAction"
 		:delay-on-mouse-out="300"
 		@document-click="$emit('document-click')"
-		@hide="$emit('hide')"
-		@show="$emit('show')"
+		@hide="onHide"
+		@show="onShow"
 	>
 		<div
 			class="popper dsDropdown"
@@ -20,11 +20,17 @@
 				'-radiusBottom -radiusTop': radius === DROPDOWN_RADIUSES.BOTH,
 			}"
 		>
-			<slot :close="close" />
+			<div
+				class="dsDropdown__scrollableWrapper"
+				:class="{ '-heightLimited': !!maxHeight }"
+				:style="scrollableWrapperStyles"
+			>
+				<slot :close="close" />
+			</div>
 		</div>
 
 		<template #reference>
-			<slot name="reference" />
+			<slot name="reference" :is-opened="isOpened" />
 		</template>
 	</vue-popper>
 </template>
@@ -42,6 +48,7 @@
 	box-shadow: $shadow-m;
 	max-width: 100%;
 	min-width: 128px;
+	overflow: hidden;
 	padding: 0;
 	text-align: left;
 
@@ -62,6 +69,12 @@
 	&[x-placement^='top'] {
 		margin-bottom: $space-xxxxs;
 	}
+
+	&__scrollableWrapper {
+		&.-heightLimited {
+			overflow-y: auto;
+		}
+	}
 }
 </style>
 
@@ -113,15 +126,25 @@ export default {
 				return Object.values(DROPDOWN_PLACEMENTS).includes(placement);
 			},
 		},
+		maxHeight: {
+			type: String,
+			default: null,
+		},
 	},
 	emits: ['document-click', 'hide', 'show'],
 	data() {
 		return {
 			key: 1,
+			isOpened: false,
 			DROPDOWN_RADIUSES: Object.freeze(DROPDOWN_RADIUSES),
 		};
 	},
 	computed: {
+		scrollableWrapperStyles() {
+			return {
+				...(this.maxHeight && { maxHeight: this.maxHeight }),
+			};
+		},
 		options() {
 			return {
 				modifiers: { preventOverflow: { padding: 0 } },
@@ -153,6 +176,7 @@ export default {
 	},
 	methods: {
 		close() {
+			this.isOpened = false;
 			this.$refs.popper.doClose();
 		},
 		updateKey() {
@@ -160,6 +184,14 @@ export default {
 			// vue-popperjs doesn't support changing props in existing component
 			this.key++;
 		},
+		onHide() {
+			this.isOpened = false;
+			this.$emit('hide');
+		},
+		onShow() {
+			this.isOpened = true;
+			this.$emit('show');
+		},
 	},
 };
 </script>

package/lib/js/components/Pagination/Pagination.spec.ts

@@ -9,6 +9,19 @@ describe('Pagination', () => {
 				currentPage,
 				itemsTotalAmount,
 			} as any,
+			global: {
+				stubs: {
+					Dropdown: {
+						template: '<div class="dropdown"><slot name="reference" /><slot/></div>',
+					},
+					SelectList: {
+						template: '<div class="select-list"><slot/></div>',
+					},
+					SelectListItem: {
+						template: '<div class="select-list-item"><slot/></div>',
+					},
+				},
+			},
 		});
 	};
 
@@ -98,10 +111,112 @@ describe('Pagination', () => {
 		},
 	])('should calculate correct pagination for %o', ({ props, expected }) => {
 		const component = createComponent(props);
+
 		const elements: Array<string> = [];
 		component.findAll('.ds-pagination__itemWrapper').forEach((element) => {
 			elements.push(element.text().trim());
 		});
 		expect(elements).toEqual(expected);
 	});
+
+	test.each([
+		{
+			props: {
+				currentPage: 3,
+				itemsTotalAmount: 300,
+			},
+			expected: {
+				dropdowns: 1,
+				dropdownItemsCount: 10,
+				dropdownItems: [
+					{ label: '1 (1 - 30)', isSelected: 'false' },
+					{ label: '2 (31 - 60)', isSelected: 'false' },
+					{ label: '3 (61 - 90)', isSelected: 'true' },
+					{ label: '4 (91 - 120)', isSelected: 'false' },
+					{ label: '5 (121 - 150)', isSelected: 'false' },
+					{ label: '6 (151 - 180)', isSelected: 'false' },
+					{ label: '7 (181 - 210)', isSelected: 'false' },
+					{ label: '8 (211 - 240)', isSelected: 'false' },
+					{ label: '9 (241 - 270)', isSelected: 'false' },
+					{ label: '10 (271 - 300)', isSelected: 'false' },
+				],
+			},
+		},
+		{
+			props: {
+				currentPage: 3,
+				itemsTotalAmount: 221,
+			},
+			expected: {
+				dropdowns: 1,
+				dropdownItemsCount: 8,
+				dropdownItems: [
+					{ label: '1 (1 - 30)', isSelected: 'false' },
+					{ label: '2 (31 - 60)', isSelected: 'false' },
+					{ label: '3 (61 - 90)', isSelected: 'true' },
+					{ label: '4 (91 - 120)', isSelected: 'false' },
+					{ label: '5 (121 - 150)', isSelected: 'false' },
+					{ label: '6 (151 - 180)', isSelected: 'false' },
+					{ label: '7 (181 - 210)', isSelected: 'false' },
+					{ label: '8 (211 - 221)', isSelected: 'false' },
+				],
+			},
+		},
+		{
+			props: {
+				currentPage: 6,
+				itemsTotalAmount: 311,
+			},
+			expected: {
+				dropdowns: 2,
+				dropdownItemsCount: 11,
+				dropdownItems: [
+					{ label: '1 (1 - 30)', isSelected: 'false' },
+					{ label: '2 (31 - 60)', isSelected: 'false' },
+					{ label: '3 (61 - 90)', isSelected: 'false' },
+					{ label: '4 (91 - 120)', isSelected: 'false' },
+					{ label: '5 (121 - 150)', isSelected: 'false' },
+					{ label: '6 (151 - 180)', isSelected: 'true' },
+					{ label: '7 (181 - 210)', isSelected: 'false' },
+					{ label: '8 (211 - 240)', isSelected: 'false' },
+					{ label: '9 (241 - 270)', isSelected: 'false' },
+					{ label: '10 (271 - 300)', isSelected: 'false' },
+					{ label: '11 (301 - 311)', isSelected: 'false' },
+				],
+			},
+		},
+	])('should render dropdown for %o', ({ props, expected }) => {
+		const component = createComponent(props);
+
+		expect(component.findAll('.dropdown').length).toBe(expected.dropdowns);
+
+		const dropdown = component.find('.dropdown');
+		expect(dropdown.findAll('.select-list-item').length).toBe(expected.dropdownItemsCount);
+
+		dropdown.findAll('.select-list-item').forEach((item, index) => {
+			expect(item.attributes('label')).toBe(expected.dropdownItems[index].label);
+			expect(item.attributes('is-selected')).toBe(expected.dropdownItems[index].isSelected);
+		});
+	});
+
+	it('should update selected item after page change', async () => {
+		let currentPage = 3;
+		const component = createComponent({
+			currentPage,
+			itemsTotalAmount: 300,
+		});
+
+		const dropdown = component.find('.dropdown');
+		expect(
+			dropdown.findAll('.select-list-item')[currentPage - 1].attributes('is-selected'),
+		).toBe('true');
+
+		await component.setProps({ currentPage: 1 });
+
+		expect(component.findAll('.select-list-item')[0].attributes('is-selected')).toBe('true');
+
+		expect(
+			component.findAll('.select-list-item')[currentPage - 1].attributes('is-selected'),
+		).toBe('false');
+	});
 });

package/lib/js/components/Pagination/Pagination.vue

@@ -27,8 +27,42 @@
 							{{ navigationItem }}
 						</span>
 					</div>
-					<div v-else :key="`ellipsis${index}`" class="ds-pagination__itemWrapper">
-						<span class="ds-pagination__ellipsis">&hellip;</span>
+					<div v-else :key="`ellipsis${index}`">
+						<dropdown
+							:radius="DROPDOWN_RADIUSES.BOTTOM"
+							max-height="250px"
+							:placement="
+								ellipsisAsSecond(index)
+									? DROPDOWN_PLACEMENTS.BOTTOM_START
+									: DROPDOWN_PLACEMENTS.BOTTOM_END
+							"
+						>
+							<template #reference="{ isOpened }">
+								<div class="ds-pagination__itemWrapper -touchable">
+									<span
+										class="ds-pagination__item"
+										:class="{ '-selected': isOpened }"
+										>&hellip;</span
+									>
+								</div>
+							</template>
+
+							<template #default="{ close }">
+								<select-list v-if="navigationItemsForDropdown.length">
+									<select-list-item
+										v-for="(
+											dropdownNavigationItem, dropdownIndex
+										) in navigationItemsForDropdown"
+										:key="dropdownIndex"
+										:label="dropdownNavigationItem.label"
+										:is-selected="currentPage === dropdownNavigationItem.value"
+										@click="
+											onDropdownClick(dropdownNavigationItem.value, close)
+										"
+									/>
+								</select-list>
+							</template>
+						</dropdown>
 					</div>
 				</template>
 			</div>
@@ -164,10 +198,10 @@ $pagination-input-height: 32px;
 	}
 
 	&__text {
-		@include text-m-default-regular;
+		@include label-l-default-regular;
 
 		color: $color-neutral-text;
-		padding: $space-xxxs;
+		padding: $space-xxs $space-xxxs;
 		text-align: center;
 	}
 
@@ -178,7 +212,7 @@ $pagination-input-height: 32px;
 	}
 
 	&__itemWrapper {
-		@include text-m-default-regular;
+		@include label-l-default-regular;
 
 		padding: $space-xxxxs;
 		text-align: center;
@@ -201,10 +235,10 @@ $pagination-input-height: 32px;
 		flex-direction: column;
 		justify-content: center;
 		min-width: $pagination-item-min-width;
-		padding: $space-xxxs;
+		padding: $space-xxs;
 
 		&.-selected {
-			@include text-m-default-bold;
+			@include label-l-default-bold;
 
 			background: $color-neutral-background-medium;
 			color: $color-neutral-text-heavy;
@@ -216,15 +250,6 @@ $pagination-input-height: 32px;
 		}
 	}
 
-	&__ellipsis {
-		align-items: center;
-		color: $color-neutral-text-weak;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		padding: $space-xxxs;
-	}
-
 	&__accessorySlot {
 		align-items: center;
 		display: flex;
@@ -240,13 +265,19 @@ import IconButton from '../Buttons/IconButton/IconButton.vue';
 import { ICON_BUTTON_COLORS, ICON_BUTTON_SIZES, ICON_BUTTON_STATES } from '../Buttons/IconButton';
 import { ICONS } from '../Icons/Icon';
 
+import { DROPDOWN_PLACEMENTS, DROPDOWN_RADIUSES } from '../Dropdown/Dropdown.consts';
+import Dropdown from '../Dropdown/Dropdown.vue';
+
+import SelectList from '../SelectList/SelectList.vue';
+import SelectListItem from '../SelectList/SelectListItem/SelectListItem.vue';
+
 const MAX_NAVIGATION_ITEMS = 7;
 const ELLIPSIS_FILL = 'ellipsis';
 const FIRST_PAGE_NUMBER = 1;
 
 export default {
 	name: 'Pagination',
-	components: { IconButton },
+	components: { IconButton, Dropdown, SelectListItem, SelectList },
 	props: {
 		currentPage: {
 			type: Number,
@@ -278,6 +309,8 @@ export default {
 	emits: ['change-page'],
 	data() {
 		return {
+			DROPDOWN_PLACEMENTS: Object.freeze(DROPDOWN_PLACEMENTS),
+			DROPDOWN_RADIUSES: Object.freeze(DROPDOWN_RADIUSES),
 			ICON_BUTTON_SIZES: Object.freeze(ICON_BUTTON_SIZES),
 			ICON_BUTTON_COLORS: Object.freeze(ICON_BUTTON_COLORS),
 			ICON_BUTTON_STATES: Object.freeze(ICON_BUTTON_STATES),
@@ -333,8 +366,25 @@ export default {
 
 			return navigationItems;
 		},
+		navigationItemsForDropdown() {
+			return this.getRange(FIRST_PAGE_NUMBER, this.lastPage).map((pageNumber: number) => {
+				const startItem = (pageNumber - 1) * this.itemsPerPage;
+				const endItem =
+					pageNumber < this.lastPage
+						? startItem + this.itemsPerPage
+						: this.itemsTotalAmount;
+
+				return {
+					label: `${pageNumber} (${startItem + 1} - ${endItem})`,
+					value: pageNumber,
+				};
+			});
+		},
 	},
 	methods: {
+		ellipsisAsSecond(index: number) {
+			return index === 1;
+		},
 		getRange(start: number, end: number): Array<number> {
 			return Array(end - start + 1)
 				.fill(null)
@@ -355,6 +405,10 @@ export default {
 
 			this.changePage(page);
 		},
+		onDropdownClick(page: number, close: () => void) {
+			this.changePage(page);
+			close();
+		},
 	},
 };
 </script>

package/lib/js/components/SelectList/SelectListItem/SelectListItem.stories.ts

@@ -3,9 +3,9 @@ import { ICONS } from '../../Icons/Icon';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import {
-	SELECT_LIST_ITEM_STATES,
-	SELECT_LIST_ITEM_SIZES,
 	SELECT_LIST_ITEM_SELECTION_MODE,
+	SELECT_LIST_ITEM_SIZES,
+	SELECT_LIST_ITEM_STATES,
 } from './SelectListItem.consts';
 
 export default {
@@ -22,6 +22,8 @@ const StoryTemplate: StoryFn<typeof SelectListItem> = (args) => ({
 			<select-list-item
 					:icon-left="ICONS[iconLeft]"
 					:label="label"
+					:eyebrow-text="eyebrowText"
+					:is-eyebrow-text-uppercase="isEyebrowTextUppercase"
 					:is-selected="isSelected"
 					:selection-mode="selectionMode"
 					:size="size"
@@ -41,6 +43,8 @@ const args = {
 	size: SELECT_LIST_ITEM_SIZES.SMALL,
 	iconLeft: null,
 	label: 'Label',
+	eyebrowText: 'Eyebrow Text',
+	isEyebrowTextUppercase: false,
 	state: SELECT_LIST_ITEM_STATES.DEFAULT,
 	isSelected: false,
 	selectionMode: SELECT_LIST_ITEM_SELECTION_MODE.SELECT_ONLY,

package/lib/js/components/SelectList/SelectListItem/SelectListItem.vue

@@ -18,7 +18,15 @@
 			:spinning="isLoading"
 		/>
 
-		<span class="selectListItem__text">{{ label }}</span>
+		<span class="selectListItem__textWrapper">
+			<span
+				v-if="eyebrowText"
+				class="selectListItem__eyebrowText"
+				:class="{ '-uppercase': isEyebrowTextUppercase }"
+				>{{ eyebrowText }}</span
+			>
+			<span class="selectListItem__text">{{ label }}</span>
+		</span>
 
 		<ds-icon
 			v-if="isSelected"
@@ -38,6 +46,7 @@
 
 .selectListItem {
 	$self: &;
+	$minHeight: 40px;
 
 	@include label-l-default-regular;
 
@@ -45,6 +54,7 @@
 	color: $color-neutral-text-heavy;
 	cursor: pointer;
 	display: flex;
+	min-height: $minHeight;
 	padding: $space-xs;
 
 	&:focus {
@@ -104,13 +114,32 @@
 		width: $icon-xs;
 	}
 
-	&__text {
+	&__textWrapper {
+		display: flex;
+		flex-direction: column;
 		flex-grow: 1;
+		gap: $space-xxxxxs;
 		overflow: hidden;
-		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
 
+	&__text {
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	&__eyebrowText {
+		@include info-s-default-bold;
+
+		color: $color-neutral-text-weak;
+		overflow: hidden;
+		text-overflow: ellipsis;
+
+		&.-uppercase {
+			@include info-s-extensive-bold-uppercase;
+		}
+	}
+
 	&.-disabled {
 		#{$self}__iconLeft {
 			color: $color-neutral-icon-disabled;
@@ -123,6 +152,10 @@
 		#{$self}__text {
 			color: $color-neutral-text-heavy-disabled;
 		}
+
+		#{$self}__eyebrowText {
+			color: $color-neutral-text-weak-disabled;
+		}
 	}
 }
 </style>
@@ -157,6 +190,14 @@ export default {
 			type: String,
 			required: true,
 		},
+		eyebrowText: {
+			type: String,
+			default: '',
+		},
+		isEyebrowTextUppercase: {
+			type: Boolean,
+			default: false,
+		},
 		selectionMode: {
 			type: String,
 			default: SELECT_LIST_ITEM_SELECTION_MODE.SELECT_ONLY,

package/lib/js/components/SelectList/SelectListItemTile/SelectListItemTile.vue

@@ -1,18 +1,19 @@
 <template>
-	<ds-tile
-		class="selectListItemTile"
-		:interactive="interactive"
-		:icon-left="iconLeft"
-		:icon-right="iconRight"
-		:text="text"
-		:eyebrow-text="eyebrowText"
-		:additional-text="additionalText"
-		:color="color"
-		:is-eyebrow-text-uppercase="isEyebrowTextUppercase"
-		:state="state"
-		:eyebrow-ellipsis="eyebrowEllipsis"
-		:text-ellipsis="textEllipsis"
-	/>
+	<div class="selectListItemTile">
+		<ds-tile
+			:interactive="interactive"
+			:icon-left="iconLeft"
+			:icon-right="iconRight"
+			:text="text"
+			:eyebrow-text="eyebrowText"
+			:additional-text="additionalText"
+			:color="color"
+			:is-eyebrow-text-uppercase="isEyebrowTextUppercase"
+			:state="state"
+			:eyebrow-ellipsis="eyebrowEllipsis"
+			:text-ellipsis="textEllipsis"
+		/>
+	</div>
 </template>
 
 <style scoped lang="scss">
@@ -24,73 +25,14 @@
 </style>
 
 <script lang="ts">
-import Tile, { TILE_COLORS, TILE_STATES } from '../../Tile';
-import { ICONS } from '../../Icons/Icon';
-import { toRaw } from 'vue';
-import { Value } from 'utils/type.utils';
+import Tile from '../../Tile';
+import { props } from '../../Tile/Tile.shared';
 
 export default {
 	name: 'SelectListItemTile',
 	components: {
 		DsTile: Tile,
 	},
-	props: {
-		interactive: {
-			type: Boolean,
-			default: false,
-		},
-		iconLeft: {
-			type: Object,
-			default: null,
-			validator(iconLeft) {
-				return Object.values(ICONS).includes(toRaw(iconLeft));
-			},
-		},
-		iconRight: {
-			type: Object,
-			default: null,
-			validator(iconRight) {
-				return Object.values(ICONS).includes(toRaw(iconRight));
-			},
-		},
-		text: {
-			type: String,
-			required: true,
-		},
-		eyebrowText: {
-			type: String,
-			required: true,
-		},
-		additionalText: {
-			type: String,
-			default: null,
-		},
-		color: {
-			type: String,
-			default: TILE_COLORS.NEUTRAL,
-			validator(color) {
-				return Object.values(TILE_COLORS).includes(color);
-			},
-		},
-		isEyebrowTextUppercase: {
-			type: Boolean,
-			default: false,
-		},
-		state: {
-			type: String,
-			default: TILE_STATES.DEFAULT,
-			validator(value: Value<typeof TILE_STATES>) {
-				return Object.values(TILE_STATES).includes(value);
-			},
-		},
-		eyebrowEllipsis: {
-			type: Boolean,
-			default: true,
-		},
-		textEllipsis: {
-			type: Boolean,
-			default: true,
-		},
-	},
+	props,
 };
 </script>