diff --git a/output/vue/package.json b/output/vue/package.json index e0b66044d45..65724276346 100644 --- a/output/vue/package.json +++ b/output/vue/package.json @@ -38,7 +38,7 @@ "test:components": "playwright test -c playwright.config.ts" }, "dependencies": { - "vue": "^3.4.29" + "vue": "^3.4.30" }, "devDependencies": { "@playwright/experimental-ct-vue": "1.44.1", diff --git a/package-lock.json b/package-lock.json index 0be4bfb1292..2e39b5e4304 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10678,9 +10678,9 @@ "integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==" }, "node_modules/@types/node": { - "version": "20.14.7", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.7.tgz", - "integrity": "sha512-uTr2m2IbJJucF3KUxgnGOZvYbN0QgkGyWxG6973HCpMYFy2KfcgYuIwkJQMQkt1VbBMlvWRbpshFTLxnxCZjKQ==", + "version": "20.14.8", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.8.tgz", + "integrity": "sha512-DO+2/jZinXfROG7j7WKFn/3C6nFwxy2lLpgLjEXJz+0XKphZlTLJ14mo8Vfg8X5BWN6XjyESXq+LcYdT7tR3bA==", "dependencies": { "undici-types": "~5.26.4" } @@ -11887,12 +11887,12 @@ } }, "node_modules/@vue/compiler-core": { - "version": "3.4.29", - "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.29.tgz", - "integrity": "sha512-TFKiRkKKsRCKvg/jTSSKK7mYLJEQdUiUfykbG49rubC9SfDyvT2JrzTReopWlz2MxqeLyxh9UZhvxEIBgAhtrg==", + "version": "3.4.30", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.30.tgz", + "integrity": "sha512-ZL8y4Xxdh8O6PSwfdZ1IpQ24PjTAieOz3jXb/MDTfDtANcKBMxg1KLm6OX2jofsaQGYfIVzd3BAG22i56/cF1w==", "dependencies": { "@babel/parser": "^7.24.7", - "@vue/shared": "3.4.29", + "@vue/shared": "3.4.30", "entities": "^4.5.0", "estree-walker": "^2.0.2", "source-map-js": "^1.2.0" @@ -11904,24 +11904,24 @@ "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==" }, "node_modules/@vue/compiler-dom": { - "version": "3.4.29", - "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.29.tgz", - "integrity": "sha512-A6+iZ2fKIEGnfPJejdB7b1FlJzgiD+Y/sxxKwJWg1EbJu6ZPgzaPQQ51ESGNv0CP6jm6Z7/pO6Ia8Ze6IKrX7w==", + "version": "3.4.30", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.30.tgz", + "integrity": "sha512-+16Sd8lYr5j/owCbr9dowcNfrHd+pz+w2/b5Lt26Oz/kB90C9yNbxQ3bYOvt7rI2bxk0nqda39hVcwDFw85c2Q==", "dependencies": { - "@vue/compiler-core": "3.4.29", - "@vue/shared": "3.4.29" + "@vue/compiler-core": "3.4.30", + "@vue/shared": "3.4.30" } }, "node_modules/@vue/compiler-sfc": { - "version": "3.4.29", - "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.29.tgz", - "integrity": "sha512-zygDcEtn8ZimDlrEQyLUovoWgKQic6aEQqRXce2WXBvSeHbEbcAsXyCk9oG33ZkyWH4sl9D3tkYc1idoOkdqZQ==", + "version": "3.4.30", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.30.tgz", + "integrity": "sha512-8vElKklHn/UY8+FgUFlQrYAPbtiSB2zcgeRKW7HkpSRn/JjMRmZvuOtwDx036D1aqKNSTtXkWRfqx53Qb+HmMg==", "dependencies": { "@babel/parser": "^7.24.7", - "@vue/compiler-core": "3.4.29", - "@vue/compiler-dom": "3.4.29", - "@vue/compiler-ssr": "3.4.29", - "@vue/shared": "3.4.29", + "@vue/compiler-core": "3.4.30", + "@vue/compiler-dom": "3.4.30", + "@vue/compiler-ssr": "3.4.30", + "@vue/shared": "3.4.30", "estree-walker": "^2.0.2", "magic-string": "^0.30.10", "postcss": "^8.4.38", @@ -11942,12 +11942,12 @@ } }, "node_modules/@vue/compiler-ssr": { - "version": "3.4.29", - "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.29.tgz", - "integrity": "sha512-rFbwCmxJ16tDp3N8XCx5xSQzjhidYjXllvEcqX/lopkoznlNPz3jyy0WGJCyhAaVQK677WWFt3YO/WUEkMMUFQ==", + "version": "3.4.30", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.30.tgz", + "integrity": "sha512-ZJ56YZGXJDd6jky4mmM0rNaNP6kIbQu9LTKZDhcpddGe/3QIalB1WHHmZ6iZfFNyj5mSypTa4+qDJa5VIuxMSg==", "dependencies": { - "@vue/compiler-dom": "3.4.29", - "@vue/shared": "3.4.29" + "@vue/compiler-dom": "3.4.30", + "@vue/shared": "3.4.30" } }, "node_modules/@vue/devtools-api": { @@ -12342,49 +12342,49 @@ } }, "node_modules/@vue/reactivity": { - "version": "3.4.29", - "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.29.tgz", - "integrity": "sha512-w8+KV+mb1a8ornnGQitnMdLfE0kXmteaxLdccm2XwdFxXst4q/Z7SEboCV5SqJNpZbKFeaRBBJBhW24aJyGINg==", + "version": "3.4.30", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.30.tgz", + "integrity": "sha512-bVJurnCe3LS0JII8PPoAA63Zd2MBzcKrEzwdQl92eHCcxtIbxD2fhNwJpa+KkM3Y/A4T5FUnmdhgKwOf6BfbcA==", "dependencies": { - "@vue/shared": "3.4.29" + "@vue/shared": "3.4.30" } }, "node_modules/@vue/runtime-core": { - "version": "3.4.29", - "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.29.tgz", - "integrity": "sha512-s8fmX3YVR/Rk5ig0ic0NuzTNjK2M7iLuVSZyMmCzN/+Mjuqqif1JasCtEtmtoJWF32pAtUjyuT2ljNKNLeOmnQ==", + "version": "3.4.30", + "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.30.tgz", + "integrity": "sha512-qaFEbnNpGz+tlnkaualomogzN8vBLkgzK55uuWjYXbYn039eOBZrWxyXWq/7qh9Bz2FPifZqGjVDl/FXiq9L2g==", "dependencies": { - "@vue/reactivity": "3.4.29", - "@vue/shared": "3.4.29" + "@vue/reactivity": "3.4.30", + "@vue/shared": "3.4.30" } }, "node_modules/@vue/runtime-dom": { - "version": "3.4.29", - "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.29.tgz", - "integrity": "sha512-gI10atCrtOLf/2MPPMM+dpz3NGulo9ZZR9d1dWo4fYvm+xkfvRrw1ZmJ7mkWtiJVXSsdmPbcK1p5dZzOCKDN0g==", + "version": "3.4.30", + "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.30.tgz", + "integrity": "sha512-tV6B4YiZRj5QsaJgw2THCy5C1H+2UeywO9tqgWEc21tn85qHEERndHN/CxlyXvSBFrpmlexCIdnqPuR9RM9thw==", "dependencies": { - "@vue/reactivity": "3.4.29", - "@vue/runtime-core": "3.4.29", - "@vue/shared": "3.4.29", + "@vue/reactivity": "3.4.30", + "@vue/runtime-core": "3.4.30", + "@vue/shared": "3.4.30", "csstype": "^3.1.3" } }, "node_modules/@vue/server-renderer": { - "version": "3.4.29", - "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.29.tgz", - "integrity": "sha512-HMLCmPI2j/k8PVkSBysrA2RxcxC5DgBiCdj7n7H2QtR8bQQPqKAe8qoaxLcInzouBmzwJ+J0x20ygN/B5mYBng==", + "version": "3.4.30", + "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.30.tgz", + "integrity": "sha512-TBD3eqR1DeDc0cMrXS/vEs/PWzq1uXxnvjoqQuDGFIEHFIwuDTX/KWAQKIBjyMWLFHEeTDGYVsYci85z2UbTDg==", "dependencies": { - "@vue/compiler-ssr": "3.4.29", - "@vue/shared": "3.4.29" + "@vue/compiler-ssr": "3.4.30", + "@vue/shared": "3.4.30" }, "peerDependencies": { - "vue": "3.4.29" + "vue": "3.4.30" } }, "node_modules/@vue/shared": { - "version": "3.4.29", - "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.29.tgz", - "integrity": "sha512-hQ2gAQcBO/CDpC82DCrinJNgOHI2v+FA7BDW4lMSPeBpQ7sRe2OLHWe5cph1s7D8DUQAwRt18dBDfJJ220APEA==" + "version": "3.4.30", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.30.tgz", + "integrity": "sha512-CLg+f8RQCHQnKvuHY9adMsMaQOcqclh6Z5V9TaoMgy0ut0tz848joZ7/CYFFyF/yZ5i2yaw7Fn498C+CNZVHIg==" }, "node_modules/@vueuse/components": { "version": "10.11.0", @@ -35670,15 +35670,15 @@ "integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==" }, "node_modules/vue": { - "version": "3.4.29", - "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.29.tgz", - "integrity": "sha512-8QUYfRcYzNlYuzKPfge1UWC6nF9ym0lx7mpGVPJYNhddxEf3DD0+kU07NTL0sXuiT2HuJuKr/iEO8WvXvT0RSQ==", + "version": "3.4.30", + "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.30.tgz", + "integrity": "sha512-NcxtKCwkdf1zPsr7Y8+QlDBCGqxvjLXF2EX+yi76rV5rrz90Y6gK1cq0olIhdWGgrlhs9ElHuhi9t3+W5sG5Xw==", "dependencies": { - "@vue/compiler-dom": "3.4.29", - "@vue/compiler-sfc": "3.4.29", - "@vue/runtime-dom": "3.4.29", - "@vue/server-renderer": "3.4.29", - "@vue/shared": "3.4.29" + "@vue/compiler-dom": "3.4.30", + "@vue/compiler-sfc": "3.4.30", + "@vue/runtime-dom": "3.4.30", + "@vue/server-renderer": "3.4.30", + "@vue/shared": "3.4.30" }, "peerDependencies": { "typescript": "*" @@ -35719,9 +35719,9 @@ } }, "node_modules/vue-router": { - "version": "4.3.3", - "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.3.tgz", - "integrity": "sha512-8Q+u+WP4N2SXY38FDcF2H1dUEbYVHVPtPCPZj/GTZx8RCbiB8AtJP9+YIxn4Vs0svMTNQcLIzka4GH7Utkx9xQ==", + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.0.tgz", + "integrity": "sha512-HB+t2p611aIZraV2aPSRNXf0Z/oLZFrlygJm+sZbdJaW6lcFqEDQwnzUBXn+DApw+/QzDU/I9TeWx9izEjTmsA==", "dependencies": { "@vue/devtools-api": "^6.5.1" }, @@ -37669,7 +37669,7 @@ "version": "0.0.0", "license": "Apache-2.0", "dependencies": { - "vue": "^3.4.29" + "vue": "^3.4.30" }, "devDependencies": { "@playwright/experimental-ct-vue": "1.44.1", @@ -37829,29 +37829,20 @@ "@angular/cli": "17.3.8", "@angular/compiler-cli": "17.3.11", "@types/express": "^4.17.21", - "@types/node": "^18.18.0", + "@types/node": "^20.14.8", "cpr": "3.0.1", "ng-packagr": "17.3.0", "typescript": "^5.4.5" } }, - "showcases/angular-ssr-showcase/node_modules/@types/node": { - "version": "18.19.38", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.38.tgz", - "integrity": "sha512-SApYXUF7si4JJ+lO2o6X60OPOnA6wPpbiB09GMCkQ+JAwpa9hxUVG8p7GzA08TKQn5OhzK57rj1wFj+185YsGg==", - "dev": true, - "dependencies": { - "undici-types": "~5.26.4" - } - }, "showcases/next-showcase": { "dependencies": { - "next": "latest", + "next": "*", "react": "18.3.1", "react-dom": "18.3.1" }, "devDependencies": { - "@types/node": "^20.12.7", + "@types/node": "^20.14.8", "@types/react": "^18.3.1", "npm-run-all": "^4.1.5", "open-cli": "^8.0.0", @@ -37866,8 +37857,8 @@ "hasInstallScript": true, "dependencies": { "nuxt": "^3.11.2", - "vue": "^3.4.21", - "vue-router": "^4.3.0" + "vue": "^3.4.30", + "vue-router": "^4.4.0" } }, "showcases/patternhub": { @@ -37886,7 +37877,7 @@ "@mdx-js/react": "^3.0.1", "@next/mdx": "^14.2.4", "@types/dompurify": "3.0.5", - "@types/node": "20.14.7", + "@types/node": "20.14.8", "@types/react": "18.3.3", "@types/react-dom": "18.3.0", "esbuild": "0.21.5", @@ -38725,8 +38716,8 @@ "version": "0.0.0", "dependencies": { "sa11y": "3.2.1", - "vue": "^3.4.29", - "vue-router": "4.3.3" + "vue": "^3.4.30", + "vue-router": "4.4.0" }, "devDependencies": { "@vitejs/plugin-vue": "^5.0.5", diff --git a/packages/components/src/components/badge/badge.lite.tsx b/packages/components/src/components/badge/badge.lite.tsx index 0892d43033e..7bbef7371b1 100644 --- a/packages/components/src/components/badge/badge.lite.tsx +++ b/packages/components/src/components/badge/badge.lite.tsx @@ -1,6 +1,14 @@ -import { useMetadata, useRef, useStore } from '@builder.io/mitosis'; +import { + onMount, + onUpdate, + Show, + useMetadata, + useRef, + useStore +} from '@builder.io/mitosis'; import { DBBadgeProps, DBBadgeState } from './model'; import { cls } from '../../utils'; +import { DEFAULT_LABEL } from '../../shared/constants'; useMetadata({ isAttachedToShadowDom: true @@ -8,7 +16,30 @@ useMetadata({ export default function DBBadge(props: DBBadgeProps) { const ref = useRef(null); - const state = useStore({}); + const state = useStore({ + initialized: false + }); + + onMount(() => { + state.initialized = true; + }); + + onUpdate(() => { + if (ref && state.initialized) { + if (props.placement?.startsWith('corner')) { + let parent = ref.parentElement; + + if (parent && parent.localName.includes('badge')) { + // Angular workaround + parent = parent.parentElement; + } + + if (parent) { + parent.setAttribute('data-has-badge', 'true'); + } + } + } + }, [ref, state.initialized]); return ( + data-placement={props.placement} + data-label={ + props.placement?.startsWith('corner') && + (props.label ?? DEFAULT_LABEL) + }> {props.children} ); diff --git a/packages/components/src/components/badge/badge.scss b/packages/components/src/components/badge/badge.scss index a1a0f9d5f25..47ffe436273 100644 --- a/packages/components/src/components/badge/badge.scss +++ b/packages/components/src/components/badge/badge.scss @@ -43,18 +43,11 @@ @extend %default-button; @include tag-components.get-tag-colors(); - border-radius: 42px; // extreme radius + border-radius: variables.$db-border-radius-full; padding-inline: variables.$db-spacing-fixed-2xs; block-size: fit-content; inline-size: fit-content; - &:empty, - > span:empty { - block-size: var(--badge-size); - inline-size: var(--badge-size); - padding: 0; - } - &:has(.db-icon) { padding: variables.$db-spacing-fixed-3xs; } @@ -69,11 +62,6 @@ @extend %db-overwrite-font-size-sm; padding-inline: variables.$db-spacing-fixed-xs; - &:empty, - > span:empty { - padding: 0; - } - &:has(.db-icon) { padding: variables.$db-spacing-fixed-2xs; } @@ -84,13 +72,28 @@ } } + &:empty, + > span:empty { + block-size: var(--badge-size); + inline-size: var(--badge-size); + padding: 0; + } + &[data-placement^="corner"] { @extend %absolute-badge; + + &[data-label] { + &::before { + content: attr(data-label); + position: fixed; + font-size: 0; + } + } } } // Global styles -:has(> .db-badge[data-placement^="corner"]) { +[data-has-badge="true"] { position: relative; } diff --git a/packages/components/src/components/badge/model.ts b/packages/components/src/components/badge/model.ts index 63eec4002d8..b3dc12ca626 100644 --- a/packages/components/src/components/badge/model.ts +++ b/packages/components/src/components/badge/model.ts @@ -3,7 +3,8 @@ import { EmphasisProps, GlobalProps, GlobalState, - SizeProps + SizeProps, + InitializedState } from '../../shared/model'; export const BadgePlacementList = [ @@ -22,6 +23,11 @@ export interface DBBadgeDefaultProps { * The `placement` attributes `corner-*` values change the position to absolute and adds a transform based on the placement. */ placement?: BadgePlacementType; + + /** + * Describes the badge for a11y if you use placement attribute with `corner-*` + */ + label?: string; } export type DBBadgeProps = DBBadgeDefaultProps & @@ -32,4 +38,4 @@ export type DBBadgeProps = DBBadgeDefaultProps & export interface DBBadgeDefaultState {} -export type DBBadgeState = DBBadgeDefaultState & GlobalState; +export type DBBadgeState = DBBadgeDefaultState & GlobalState & InitializedState; diff --git a/packages/components/src/components/tooltip/tooltip.lite.tsx b/packages/components/src/components/tooltip/tooltip.lite.tsx index e8c3bb6d3e0..372a9116262 100644 --- a/packages/components/src/components/tooltip/tooltip.lite.tsx +++ b/packages/components/src/components/tooltip/tooltip.lite.tsx @@ -6,8 +6,9 @@ import { useStore } from '@builder.io/mitosis'; import { DBTooltipProps, DBTooltipState } from './model'; -import { cls, handleDataOutside } from '../../utils'; +import { cls, handleDataOutside, uuid } from '../../utils'; import { ClickEvent } from '../../shared/model'; +import { DEFAULT_ID } from '../../shared/constants'; useMetadata({ isAttachedToShadowDom: true @@ -17,6 +18,7 @@ export default function DBTooltip(props: DBTooltipProps) { const ref = useRef(null); // jscpd:ignore-start const state = useStore({ + _id: DEFAULT_ID, initialized: false, handleClick: (event: ClickEvent) => { event.stopPropagation(); @@ -27,18 +29,27 @@ export default function DBTooltip(props: DBTooltipProps) { }); onMount(() => { + state._id = props.id || 'tooltip-' + uuid(); state.initialized = true; }); onUpdate(() => { if (ref && state.initialized) { - const parent = ref.parentElement; + let parent = ref.parentElement; + + if (parent && parent.localName.includes('tooltip')) { + // Angular workaround + parent = parent.parentElement; + } + if (parent) { ['mouseenter', 'focus'].forEach((event) => { parent.addEventListener(event, () => state.handleAutoPlacement() ); }); + parent.setAttribute('data-has-tooltip', 'true'); + parent.setAttribute('aria-describedby', state._id); } state.initialized = false; @@ -53,7 +64,7 @@ export default function DBTooltip(props: DBTooltipProps) { role="tooltip" ref={ref} className={cls('db-tooltip', props.className)} - id={props.id} + id={state._id} data-emphasis={props.emphasis} data-animation={props.animation} data-delay={props.delay} diff --git a/packages/components/src/components/tooltip/tooltip.scss b/packages/components/src/components/tooltip/tooltip.scss index 55689fe7885..2afb10e7998 100644 --- a/packages/components/src/components/tooltip/tooltip.scss +++ b/packages/components/src/components/tooltip/tooltip.scss @@ -112,10 +112,7 @@ $tooltip-arrow-shadow-size: variables.$db-sizing-2xs; // Global styles @mixin show-popover($state) { - :has( - > :is(db-tooltip, dbtooltip) > .db-tooltip:not([data-open]), - > .db-tooltip:not([data-open]) - ) { + [data-has-tooltip="true"] { &:#{$state} { .db-tooltip:first-of-type { @extend %show-popover; @@ -124,7 +121,7 @@ $tooltip-arrow-shadow-size: variables.$db-sizing-2xs; } } -:has(> db-tooltip, > dbtooltip, > .db-tooltip) { +[data-has-tooltip="true"] { position: relative; } diff --git a/scripts/dev.js b/scripts/dev.js index 886c95ff57e..71c5c543e6f 100644 --- a/scripts/dev.js +++ b/scripts/dev.js @@ -69,8 +69,7 @@ inquirer return; } - // Let startCommand = 'npm-run-all -p start:foundations dev:sass'; - let startCommand = 'npm run start:foundations & npm run dev:sass'; + let startCommand = 'npm-run-all -p start:foundations dev:sass'; const currentAnswers = answers?.frameworks; @@ -80,12 +79,12 @@ inquirer ); if (isAnswerSelected) { - startCommand += ` & npm run dev:${framework}-components`; + startCommand += ` dev:${framework}-components`; } } for (const currentAnswer of currentAnswers) { - startCommand += ` & npm run start-showcase:${currentAnswer} --if-present`; + startCommand += ` start-showcase:${currentAnswer}`; } // TODO: Handle child process better diff --git a/showcases/angular-showcase/src/app/components/tooltip/tooltip.component.html b/showcases/angular-showcase/src/app/components/tooltip/tooltip.component.html index b929342d532..f774cf65b91 100644 --- a/showcases/angular-showcase/src/app/components/tooltip/tooltip.component.html +++ b/showcases/angular-showcase/src/app/components/tooltip/tooltip.component.html @@ -10,7 +10,7 @@ let-exampleIndex="exampleIndex" let-variantIndex="variantIndex" > - + {{ exampleName }} {{ exampleProps.content }} diff --git a/showcases/angular-ssr-showcase/package.json b/showcases/angular-ssr-showcase/package.json index a1fe9096c88..5fbc4280cc1 100644 --- a/showcases/angular-ssr-showcase/package.json +++ b/showcases/angular-ssr-showcase/package.json @@ -32,7 +32,7 @@ "@angular/cli": "17.3.8", "@angular/compiler-cli": "17.3.11", "@types/express": "^4.17.21", - "@types/node": "^18.18.0", + "@types/node": "^20.14.8", "cpr": "3.0.1", "ng-packagr": "17.3.0", "typescript": "^5.4.5" diff --git a/showcases/next-showcase/package.json b/showcases/next-showcase/package.json index 30c32ac78b5..344baa7018f 100644 --- a/showcases/next-showcase/package.json +++ b/showcases/next-showcase/package.json @@ -17,7 +17,7 @@ "react-dom": "18.3.1" }, "devDependencies": { - "@types/node": "^20.12.7", + "@types/node": "^20.14.8", "@types/react": "^18.3.1", "npm-run-all": "^4.1.5", "open-cli": "^8.0.0", diff --git a/showcases/nuxt-showcase/package.json b/showcases/nuxt-showcase/package.json index 6e68a649624..995d68a70f9 100644 --- a/showcases/nuxt-showcase/package.json +++ b/showcases/nuxt-showcase/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "nuxt": "^3.11.2", - "vue": "^3.4.21", - "vue-router": "^4.3.0" + "vue": "^3.4.30", + "vue-router": "^4.4.0" } } diff --git a/showcases/patternhub/package.json b/showcases/patternhub/package.json index 8dc024574d1..9676ccfba4c 100644 --- a/showcases/patternhub/package.json +++ b/showcases/patternhub/package.json @@ -33,7 +33,7 @@ "@mdx-js/react": "^3.0.1", "@next/mdx": "^14.2.4", "@types/dompurify": "3.0.5", - "@types/node": "20.14.7", + "@types/node": "20.14.8", "@types/react": "18.3.3", "@types/react-dom": "18.3.0", "esbuild": "0.21.5", diff --git a/showcases/react-showcase/src/components/tooltip/index.tsx b/showcases/react-showcase/src/components/tooltip/index.tsx index db5bb88f1b3..04eb996fd38 100644 --- a/showcases/react-showcase/src/components/tooltip/index.tsx +++ b/showcases/react-showcase/src/components/tooltip/index.tsx @@ -13,10 +13,9 @@ const getTooltip = ({ delay, content, animation, - variant, - id + variant }: DBTooltipProps & { content: string }) => ( - + {children} + variant={variant}> {content} diff --git a/showcases/vue-showcase/package.json b/showcases/vue-showcase/package.json index a11799d624f..63d2c0a1093 100644 --- a/showcases/vue-showcase/package.json +++ b/showcases/vue-showcase/package.json @@ -13,8 +13,8 @@ }, "dependencies": { "sa11y": "3.2.1", - "vue": "^3.4.29", - "vue-router": "4.3.3" + "vue": "^3.4.30", + "vue-router": "4.4.0" }, "devDependencies": { "@vitejs/plugin-vue": "^5.0.5", diff --git a/showcases/vue-showcase/src/components/tooltip/Tooltip.vue b/showcases/vue-showcase/src/components/tooltip/Tooltip.vue index dff1790cdff..23700436706 100644 --- a/showcases/vue-showcase/src/components/tooltip/Tooltip.vue +++ b/showcases/vue-showcase/src/components/tooltip/Tooltip.vue @@ -9,7 +9,7 @@ import { DBButton, DBTooltip } from "../../../../../output/vue/src";