fix: issue with typescript props for vue (#3783)

db-ui · Feb 6, 2025 · d84cc67 · d84cc67
1 parent 6869107
commit d84cc67
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 12 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/src/shared/model.ts b/packages/components/src/shared/model.ts
@@ -17,7 +17,7 @@ export type GlobalProps = {
 	/**
 	 * Workaround for TypeScript using class for all components.
 	 */
-	class?: string;
+	class?: string | any;
 
 	/**
 	 * [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) is used to link to the elements that describe the element with the set attribute.
@@ -29,11 +29,6 @@ export type GlobalProps = {
 	 */
 	id?: string;
 
-	/**
-	 * React specific for render process.
-	 */
-	key?: string;
-
 	/**
 	 * Before using please check for the [accessibility concerns](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus#accessibility_concerns)
 	 */

diff --git a/showcases/react-showcase/src/components/header/index.tsx b/showcases/react-showcase/src/components/header/index.tsx
@@ -20,7 +20,6 @@ const getHeader = ({
 	className,
 	describedbyid,
 	id,
-	key,
 	onToggle,
 	width,
 	example,
@@ -74,7 +73,6 @@ const getHeader = ({
 		className={className}
 		describedbyid={describedbyid}
 		id={id}
-		key={key}
 		onToggle={onToggle}>
 		{(!example || withNavigation) && (
 			<DBNavigation aria-label={children}>

diff --git a/showcases/react-showcase/src/components/page/index.tsx b/showcases/react-showcase/src/components/page/index.tsx
@@ -19,16 +19,14 @@ const getPage = ({
 	children,
 	className,
 	describedbyid,
-	id,
-	key
+	id
 }: DBPageProps) => (
 	<DBPage
 		variant={variant}
 		fadeIn={fadeIn}
 		className={className}
 		describedbyid={describedbyid}
 		id={id}
-		key={key}
 		header={
 			<DBHeader
 				brand={<DBBrand title="DBHeader">DBHeader</DBBrand>}

diff --git a/showcases/vue-showcase/src/components/form/Form.vue b/showcases/vue-showcase/src/components/form/Form.vue
@@ -23,6 +23,8 @@ const tags = ref<string[]>([]);
 
 const array = ["X", "Y", "Z"];
 
+const isActive = ref(true);
+
 const dataList = [{ key: "test", value: "Test" }, { key: "test2" }];
 
 const changeTags = (tag: string) => {
@@ -178,6 +180,11 @@ const reset = () => {
 				</fieldset>
 			</form>
 		</div>
+		<DBButton
+			:class="isActive ? 'blubber' : 'dada'"
+			@click="isActive = !isActive"
+			>Test</DBButton
+		>
 		<div>
 			<h1>Output</h1>
 			<dl>