From dfee7f222c4b4129363e57d300dbfbe49e639451 Mon Sep 17 00:00:00 2001 From: Sven Date: Wed, 6 Sep 2023 09:13:39 +0200 Subject: [PATCH 1/8] wip --- packages/ui/src/composites/wui-tabs/index.ts | 24 ++++++++--- packages/ui/src/composites/wui-tabs/styles.ts | 42 +++++++++++++++++++ 2 files changed, 61 insertions(+), 5 deletions(-) diff --git a/packages/ui/src/composites/wui-tabs/index.ts b/packages/ui/src/composites/wui-tabs/index.ts index 77c318c0fa..de7fd7edd0 100644 --- a/packages/ui/src/composites/wui-tabs/index.ts +++ b/packages/ui/src/composites/wui-tabs/index.ts @@ -17,22 +17,23 @@ export class WuiTabs extends LitElement { // -- Render -------------------------------------------- // public override render() { - const isDense = this.tabs.length > 3 + const dense = this.tabs.length > 3 this.style.cssText = ` --local-tab: ${this.activeTab}; - --local-tab-width: ${isDense ? '80px' : '100px'} + --local-tab-width: 100px; + --local-dense-tab-width: max-content; ` + this.dataset['type'] = dense ? 'flex' : 'block' + return this.tabs.map((tab, index) => { const isActive = index === this.activeTab return html` ` }) @@ -43,6 +44,19 @@ export class WuiTabs extends LitElement { this.activeTab = index this.onTabChange(index) } + + private showLabel(tab: { icon: IconType; label: string }, dense: boolean, isActive: boolean) { + if (!dense) { + return html` ${tab.label}` + } + if (dense) { + if (isActive) { + return html` ${tab.label}` + } + } + + return null + } } declare global { diff --git a/packages/ui/src/composites/wui-tabs/styles.ts b/packages/ui/src/composites/wui-tabs/styles.ts index df122b866d..5f1a9e5217 100644 --- a/packages/ui/src/composites/wui-tabs/styles.ts +++ b/packages/ui/src/composites/wui-tabs/styles.ts @@ -27,6 +27,21 @@ export default css` transition: transform var(--wui-ease-out-power-2) var(--wui-duration-lg); } + :host([data-type='flex'])::before { + transform: translateX(calc(var(--local-tab) * var(--local-tab-width) / 2.05)); + } + + :host([data-type='flex']) { + display: flex; + padding: 0px 20px; + gap: 32px; + } + + :host([data-type='flex']) > button[data-active='true'] > wui-text { + animation-name: fadein; + animation-duration: 0.5s; + } + button[data-active='true'] > wui-icon, button[data-active='true'] > wui-text { color: var(--wui-color-fg-100); @@ -39,6 +54,7 @@ export default css` button > wui-icon, button > wui-text { + pointer-events: none; transition: all var(--wui-ease-out-power-2) var(--wui-duration-lg); } @@ -46,6 +62,10 @@ export default css` width: var(--local-tab-width); } + :host([data-type='flex']) > button { + width: var(--local-dense-tab-width); + } + button:hover:enabled, button:active:enabled { background-color: transparent !important; @@ -60,4 +80,26 @@ export default css` button:active > wui-text { color: var(--wui-color-fg-125); } + + @keyframes fadein { + from { + opacity: 0; + transform: translateX(10px); + } + to { + opacity: 1; + transform: translateX(0px); + } + } + + @keyframes fadeout { + from { + opacity: 1; + transform: translateX(0px); + } + to { + opacity: 0; + transform: translateX(-10px); + } + } ` From 6dc5f3c9fcdd2499516fe181953083504acf5c07 Mon Sep 17 00:00:00 2001 From: Sven Date: Wed, 6 Sep 2023 09:23:46 +0200 Subject: [PATCH 2/8] tab refactor if length > 3 --- packages/ui/src/composites/wui-tabs/styles.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/ui/src/composites/wui-tabs/styles.ts b/packages/ui/src/composites/wui-tabs/styles.ts index 5f1a9e5217..ec5a023523 100644 --- a/packages/ui/src/composites/wui-tabs/styles.ts +++ b/packages/ui/src/composites/wui-tabs/styles.ts @@ -28,13 +28,12 @@ export default css` } :host([data-type='flex'])::before { - transform: translateX(calc(var(--local-tab) * var(--local-tab-width) / 2.05)); + transform: translateX(calc(var(--local-tab) * var(--local-tab-width) / 2.02)); } :host([data-type='flex']) { display: flex; - padding: 0px 20px; - gap: 32px; + padding: 0px 4px; } :host([data-type='flex']) > button[data-active='true'] > wui-text { @@ -64,6 +63,11 @@ export default css` :host([data-type='flex']) > button { width: var(--local-dense-tab-width); + padding: 0px 16px; + } + + :host([data-type='flex']) > button[data-active='true'] { + min-width: 105px; } button:hover:enabled, From 6840421a5ac4206b8dd48f9b4f3b1bca8ee2e64e Mon Sep 17 00:00:00 2001 From: Sven Date: Wed, 6 Sep 2023 09:28:30 +0200 Subject: [PATCH 3/8] cleanup --- packages/ui/src/composites/wui-tabs/index.ts | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/ui/src/composites/wui-tabs/index.ts b/packages/ui/src/composites/wui-tabs/index.ts index de7fd7edd0..477dd2715f 100644 --- a/packages/ui/src/composites/wui-tabs/index.ts +++ b/packages/ui/src/composites/wui-tabs/index.ts @@ -17,7 +17,7 @@ export class WuiTabs extends LitElement { // -- Render -------------------------------------------- // public override render() { - const dense = this.tabs.length > 3 + const isDense = this.tabs.length > 3 this.style.cssText = ` --local-tab: ${this.activeTab}; @@ -25,7 +25,7 @@ export class WuiTabs extends LitElement { --local-dense-tab-width: max-content; ` - this.dataset['type'] = dense ? 'flex' : 'block' + this.dataset['type'] = isDense ? 'flex' : 'block' return this.tabs.map((tab, index) => { const isActive = index === this.activeTab @@ -33,7 +33,7 @@ export class WuiTabs extends LitElement { return html` ` }) @@ -45,14 +45,12 @@ export class WuiTabs extends LitElement { this.onTabChange(index) } - private showLabel(tab: { icon: IconType; label: string }, dense: boolean, isActive: boolean) { - if (!dense) { + private showLabel(tab: { icon: IconType; label: string }, isDense: boolean, isActive: boolean) { + if (!isDense) { return html` ${tab.label}` } - if (dense) { - if (isActive) { - return html` ${tab.label}` - } + if (isDense && isActive) { + return html` ${tab.label}` } return null From d349dd8b4b0889b1f137d94ec68c52d44a2bbf84 Mon Sep 17 00:00:00 2001 From: Sven Date: Wed, 6 Sep 2023 13:58:29 +0200 Subject: [PATCH 4/8] tabs animation change --- packages/ui/src/composites/wui-tabs/index.ts | 67 +++++++++++++++---- packages/ui/src/composites/wui-tabs/styles.ts | 44 +++--------- 2 files changed, 66 insertions(+), 45 deletions(-) diff --git a/packages/ui/src/composites/wui-tabs/index.ts b/packages/ui/src/composites/wui-tabs/index.ts index 477dd2715f..2ce9a1e952 100644 --- a/packages/ui/src/composites/wui-tabs/index.ts +++ b/packages/ui/src/composites/wui-tabs/index.ts @@ -3,6 +3,7 @@ import { customElement, property, state } from 'lit/decorators.js' import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js' import type { IconType } from '../../utils/TypesUtil.js' import styles from './styles.js' +import { animate } from 'motion' @customElement('wui-tabs') export class WuiTabs extends LitElement { @@ -13,47 +14,89 @@ export class WuiTabs extends LitElement { @property() public onTabChange: (index: number) => void = () => null + @property({ type: Array }) public buttons: HTMLButtonElement[] = [] + @state() public activeTab = 0 + @state() public localTabWidth = '100px' + + @state() public isDense = false + // -- Render -------------------------------------------- // public override render() { - const isDense = this.tabs.length > 3 + this.isDense = this.tabs.length > 3 this.style.cssText = ` --local-tab: ${this.activeTab}; - --local-tab-width: 100px; + --local-tab-width: ${this.localTabWidth}; --local-dense-tab-width: max-content; ` - this.dataset['type'] = isDense ? 'flex' : 'block' + this.dataset['type'] = this.isDense ? 'flex' : 'block' return this.tabs.map((tab, index) => { const isActive = index === this.activeTab return html` - ` }) } + override firstUpdated() { + if (this.shadowRoot && this.isDense) { + this.buttons = [...this.shadowRoot.querySelectorAll('button')] + setTimeout(() => { + this.animateTabs(0, true) + }, 1) + } + } + // -- Private ------------------------------------------- // private onTabClick(index: number) { + if (this.buttons) { + this.animateTabs(index, false) + } this.activeTab = index this.onTabChange(index) } - private showLabel(tab: { icon: IconType; label: string }, isDense: boolean, isActive: boolean) { - if (!isDense) { - return html` ${tab.label}` - } - if (isDense && isActive) { - return html` ${tab.label}` + private animateTabs(index: number, initialAnimation: boolean) { + const passiveBtn = this.buttons[this.activeTab] + const activeBtn = this.buttons[index] + + const passiveBtnText = passiveBtn?.querySelector('wui-text') + const activeBtnText = activeBtn?.querySelector('wui-text') + + const activeBtnBounds = activeBtn?.getBoundingClientRect() + const activeBtnTextBounds = activeBtnText?.getBoundingClientRect() + + if (passiveBtn && passiveBtnText && !initialAnimation) { + animate(passiveBtnText, { opacity: 0 }, { duration: 0.25 }) + animate(passiveBtn, { width: `20px` }, { duration: 0.25, delay: 0.05 }) } - return null + if (activeBtn && activeBtnBounds && activeBtnTextBounds && activeBtnText) { + this.localTabWidth = `${Math.round( + activeBtnBounds.width + activeBtnTextBounds.width + 6 + 12 + )}px` + + animate( + activeBtn, + { width: `${activeBtnBounds.width + activeBtnTextBounds.width + 6}px` }, + { duration: 0.5, delay: 0.1 } + ) + + animate(activeBtnText, { opacity: 1 }, { duration: 0.25, delay: 0.15 }) + } } } diff --git a/packages/ui/src/composites/wui-tabs/styles.ts b/packages/ui/src/composites/wui-tabs/styles.ts index ec5a023523..7a243ef803 100644 --- a/packages/ui/src/composites/wui-tabs/styles.ts +++ b/packages/ui/src/composites/wui-tabs/styles.ts @@ -28,17 +28,19 @@ export default css` } :host([data-type='flex'])::before { - transform: translateX(calc(var(--local-tab) * var(--local-tab-width) / 2.02)); + transform: translateX(calc(var(--local-tab) * var(--local-tab-width) / 1.85)); } :host([data-type='flex']) { display: flex; - padding: 0px 4px; + padding: 0px 12px; + gap: 28px; } - :host([data-type='flex']) > button[data-active='true'] > wui-text { - animation-name: fadein; - animation-duration: 0.5s; + :host([data-type='flex']) > button > wui-text { + position: absolute; + left: 18px; + opacity: 0; } button[data-active='true'] > wui-icon, @@ -62,12 +64,10 @@ export default css` } :host([data-type='flex']) > button { - width: var(--local-dense-tab-width); - padding: 0px 16px; - } - - :host([data-type='flex']) > button[data-active='true'] { - min-width: 105px; + width: 20px; + position: relative; + display: flex; + justify-content: flex-start; } button:hover:enabled, @@ -84,26 +84,4 @@ export default css` button:active > wui-text { color: var(--wui-color-fg-125); } - - @keyframes fadein { - from { - opacity: 0; - transform: translateX(10px); - } - to { - opacity: 1; - transform: translateX(0px); - } - } - - @keyframes fadeout { - from { - opacity: 1; - transform: translateX(0px); - } - to { - opacity: 0; - transform: translateX(-10px); - } - } ` From 9b25a4fdd963f04d2c9bef64287d8ec316bb67bf Mon Sep 17 00:00:00 2001 From: Sven Date: Wed, 6 Sep 2023 15:06:42 +0200 Subject: [PATCH 5/8] cleanup --- packages/scaffold/package.json | 3 +-- packages/ui/package.json | 1 + packages/ui/src/composites/wui-tabs/index.ts | 10 ++-------- 3 files changed, 4 insertions(+), 10 deletions(-) diff --git a/packages/scaffold/package.json b/packages/scaffold/package.json index ef31333fe3..2bc08708ac 100644 --- a/packages/scaffold/package.json +++ b/packages/scaffold/package.json @@ -17,8 +17,7 @@ "dependencies": { "@web3modal/core": "3.0.0-alpha.5", "@web3modal/ui": "3.0.0-alpha.5", - "lit": "2.8.0", - "motion": "10.16.2" + "lit": "2.8.0" }, "keywords": [ "web3", diff --git a/packages/ui/package.json b/packages/ui/package.json index b3556a784d..55db40353c 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -16,6 +16,7 @@ }, "dependencies": { "lit": "2.8.0", + "motion": "10.16.2", "qrcode": "1.5.3" }, "devDependencies": { diff --git a/packages/ui/src/composites/wui-tabs/index.ts b/packages/ui/src/composites/wui-tabs/index.ts index 2ce9a1e952..b7e61c4afd 100644 --- a/packages/ui/src/composites/wui-tabs/index.ts +++ b/packages/ui/src/composites/wui-tabs/index.ts @@ -29,7 +29,6 @@ export class WuiTabs extends LitElement { this.style.cssText = ` --local-tab: ${this.activeTab}; --local-tab-width: ${this.localTabWidth}; - --local-dense-tab-width: max-content; ` this.dataset['type'] = this.isDense ? 'flex' : 'block' @@ -38,14 +37,9 @@ export class WuiTabs extends LitElement { const isActive = index === this.activeTab return html` - ` }) From a5f3413faa00571471c4fb4b0d586e9a4252e485 Mon Sep 17 00:00:00 2001 From: Sven Date: Wed, 6 Sep 2023 15:20:15 +0200 Subject: [PATCH 6/8] fix initial --- packages/ui/src/composites/wui-tabs/index.ts | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/ui/src/composites/wui-tabs/index.ts b/packages/ui/src/composites/wui-tabs/index.ts index b7e61c4afd..0c9e663518 100644 --- a/packages/ui/src/composites/wui-tabs/index.ts +++ b/packages/ui/src/composites/wui-tabs/index.ts @@ -50,7 +50,7 @@ export class WuiTabs extends LitElement { this.buttons = [...this.shadowRoot.querySelectorAll('button')] setTimeout(() => { this.animateTabs(0, true) - }, 1) + }, 0.1) } } @@ -74,8 +74,12 @@ export class WuiTabs extends LitElement { const activeBtnTextBounds = activeBtnText?.getBoundingClientRect() if (passiveBtn && passiveBtnText && !initialAnimation) { - animate(passiveBtnText, { opacity: 0 }, { duration: 0.25 }) - animate(passiveBtn, { width: `20px` }, { duration: 0.25, delay: 0.05 }) + animate(passiveBtnText, { opacity: 0 }, { duration: initialAnimation ? 0 : 0.25 }) + animate( + passiveBtn, + { width: `20px` }, + { duration: initialAnimation ? 0 : 0.25, delay: initialAnimation ? 0 : 0.05 } + ) } if (activeBtn && activeBtnBounds && activeBtnTextBounds && activeBtnText) { @@ -86,10 +90,14 @@ export class WuiTabs extends LitElement { animate( activeBtn, { width: `${activeBtnBounds.width + activeBtnTextBounds.width + 6}px` }, - { duration: 0.5, delay: 0.1 } + { duration: initialAnimation ? 0 : 0.5, delay: initialAnimation ? 0 : 0.1 } ) - animate(activeBtnText, { opacity: 1 }, { duration: 0.25, delay: 0.15 }) + animate( + activeBtnText, + { opacity: 1 }, + { duration: initialAnimation ? 0 : 0.25, delay: initialAnimation ? 0 : 0.15 } + ) } } } From 6521615125a9742eac2b701bc9a716a8fdf21925 Mon Sep 17 00:00:00 2001 From: Sven Date: Wed, 6 Sep 2023 15:21:35 +0200 Subject: [PATCH 7/8] fix initial --- packages/ui/src/composites/wui-tabs/index.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/ui/src/composites/wui-tabs/index.ts b/packages/ui/src/composites/wui-tabs/index.ts index 0c9e663518..0a61ec3b6b 100644 --- a/packages/ui/src/composites/wui-tabs/index.ts +++ b/packages/ui/src/composites/wui-tabs/index.ts @@ -74,12 +74,8 @@ export class WuiTabs extends LitElement { const activeBtnTextBounds = activeBtnText?.getBoundingClientRect() if (passiveBtn && passiveBtnText && !initialAnimation) { - animate(passiveBtnText, { opacity: 0 }, { duration: initialAnimation ? 0 : 0.25 }) - animate( - passiveBtn, - { width: `20px` }, - { duration: initialAnimation ? 0 : 0.25, delay: initialAnimation ? 0 : 0.05 } - ) + animate(passiveBtnText, { opacity: 0 }, { duration: 0.25 }) + animate(passiveBtn, { width: `20px` }, { duration: 0.25, delay: 0.05 }) } if (activeBtn && activeBtnBounds && activeBtnTextBounds && activeBtnText) { From 36c75a7e15373e3bd0b4047eead2bab25ffa0ac7 Mon Sep 17 00:00:00 2001 From: Sven Date: Wed, 6 Sep 2023 15:46:52 +0200 Subject: [PATCH 8/8] clean build --- package-lock.json | 129 ++++++++++--------- packages/ui/src/composites/wui-tabs/index.ts | 2 +- 2 files changed, 66 insertions(+), 65 deletions(-) diff --git a/package-lock.json b/package-lock.json index af7c2967a9..5b0a6f21eb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5463,21 +5463,21 @@ } }, "node_modules/@nrwl/devkit": { - "version": "16.7.4", - "resolved": "https://registry.npmjs.org/@nrwl/devkit/-/devkit-16.7.4.tgz", - "integrity": "sha512-Gt2q3cqDWzGP1woavGIo4bl8g9YaXic/Xfsl7qPq0LHJedLj49p1vXetB0wawkavSE2MTyo7yDh6YDK/38XoLw==", + "version": "16.8.0", + "resolved": "https://registry.npmjs.org/@nrwl/devkit/-/devkit-16.8.0.tgz", + "integrity": "sha512-zpSNUCj9RZAAcCIHcjeVQT8FPutnaCe0empvm0yxWPbmIXjN/4Lw1f4V5K42MNDSa4Z8Hvj1tTL3+8JXSV9JxA==", "dev": true, "dependencies": { - "@nx/devkit": "16.7.4" + "@nx/devkit": "16.8.0" } }, "node_modules/@nrwl/tao": { - "version": "16.7.4", - "resolved": "https://registry.npmjs.org/@nrwl/tao/-/tao-16.7.4.tgz", - "integrity": "sha512-hH03oF+yVmaf19UZfyLDSuVEh0KasU5YfYezuNsdRkXNdTU/WmpDrk4qoo0j6fVoMPrqbbPOn1YMRtulP2WyYA==", + "version": "16.8.0", + "resolved": "https://registry.npmjs.org/@nrwl/tao/-/tao-16.8.0.tgz", + "integrity": "sha512-b8SteybQrq34SBnrkdpsShD6hyjmq2WNi6WY2fLxkWg4IvBtG1U3KC8SdHhmbBqLA8PpBt8bV7paH8IgsiajtA==", "dev": true, "dependencies": { - "nx": "16.7.4", + "nx": "16.8.0", "tslib": "^2.3.0" }, "bin": { @@ -5485,12 +5485,12 @@ } }, "node_modules/@nx/devkit": { - "version": "16.7.4", - "resolved": "https://registry.npmjs.org/@nx/devkit/-/devkit-16.7.4.tgz", - "integrity": "sha512-SLito+/TAeDYR+d7IIpp/sBJm41WM+nIevILv0TSQW4Pq0ylUy1nUvV8Pe7l1ohZccDrQuebMUWPwGO0hv8SeQ==", + "version": "16.8.0", + "resolved": "https://registry.npmjs.org/@nx/devkit/-/devkit-16.8.0.tgz", + "integrity": "sha512-vFeWR6dQSmiVWOccIj9vpnB0nRzOY+VWucDDbQ4TKWQKzKfpnFDMsGxImff1AHFI0h4pvJOimDrY5+hktRrYew==", "dev": true, "dependencies": { - "@nrwl/devkit": "16.7.4", + "@nrwl/devkit": "16.8.0", "ejs": "^3.1.7", "enquirer": "~2.3.6", "ignore": "^5.0.4", @@ -5518,9 +5518,9 @@ } }, "node_modules/@nx/nx-darwin-arm64": { - "version": "16.7.4", - "resolved": "https://registry.npmjs.org/@nx/nx-darwin-arm64/-/nx-darwin-arm64-16.7.4.tgz", - "integrity": "sha512-pRNjxn6KlcR6iGkU1j/1pzcogwXFv97pYiZaibpF7UV0vfdEUA3EETpDcs+hbNAcKMvVtn/TgN857/5LQ/lGUg==", + "version": "16.8.0", + "resolved": "https://registry.npmjs.org/@nx/nx-darwin-arm64/-/nx-darwin-arm64-16.8.0.tgz", + "integrity": "sha512-yNmEJoRKl9JZH/O6oWUvbt5eYbSRHIJtGwvxVCtNRqykyNZNlEzMSLxz0Mx8x3h0QQ3zjZEUmMjac4tb4BPPLw==", "cpu": [ "arm64" ], @@ -5534,9 +5534,9 @@ } }, "node_modules/@nx/nx-darwin-x64": { - "version": "16.7.4", - "resolved": "https://registry.npmjs.org/@nx/nx-darwin-x64/-/nx-darwin-x64-16.7.4.tgz", - "integrity": "sha512-GANXeabAAWRoF85WDla2ZPxtr8vnqvXjwyCIhRCda8hlKiVCpM98GemucN25z97G5H6MgyV9Dd9t9jrr2Fn0Og==", + "version": "16.8.0", + "resolved": "https://registry.npmjs.org/@nx/nx-darwin-x64/-/nx-darwin-x64-16.8.0.tgz", + "integrity": "sha512-YOSLslyMJ682FrhRsmPRl0zJmr2gpSzCHR5ETScPbFaQ+kxGVuTzSUr1PFTw9lAOGiqspFf0CCqxS3ZmY4DjSg==", "cpu": [ "x64" ], @@ -5550,9 +5550,9 @@ } }, "node_modules/@nx/nx-freebsd-x64": { - "version": "16.7.4", - "resolved": "https://registry.npmjs.org/@nx/nx-freebsd-x64/-/nx-freebsd-x64-16.7.4.tgz", - "integrity": "sha512-zmBBDYjPaHhIHx1YASUJJIy+oz7mCrj5f0f3kOzfMraQOjkQZ0xYgNNUzBqmnYu1855yiphu94MkAMYJnbk0jw==", + "version": "16.8.0", + "resolved": "https://registry.npmjs.org/@nx/nx-freebsd-x64/-/nx-freebsd-x64-16.8.0.tgz", + "integrity": "sha512-puHAmnvDdemUoDt+hO53IqgWXHb6cpCmiIrT7N+sZfBVVoyieb9S9zWCXJO/HCwdkS6ibx7nixNQpYBT7J+1WQ==", "cpu": [ "x64" ], @@ -5566,9 +5566,9 @@ } }, "node_modules/@nx/nx-linux-arm-gnueabihf": { - "version": "16.7.4", - "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm-gnueabihf/-/nx-linux-arm-gnueabihf-16.7.4.tgz", - "integrity": "sha512-d3Cmz/vdtoSasTUANoh4ZYLJESNA3+PCP/HnXNqmrr6AEHo+T8DcI+qsamO3rmYUSFxTMAeMyoihZMU8OKGZ1A==", + "version": "16.8.0", + "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm-gnueabihf/-/nx-linux-arm-gnueabihf-16.8.0.tgz", + "integrity": "sha512-wymaeEElhVmXHHB0kC6uL2iE7J2Ze9s0Ws1qp5mQ8275wHEC4/OLAWSnh/B9WsGFsHPlVj/QYoXmevUyjK5etw==", "cpu": [ "arm" ], @@ -5582,9 +5582,9 @@ } }, "node_modules/@nx/nx-linux-arm64-gnu": { - "version": "16.7.4", - "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm64-gnu/-/nx-linux-arm64-gnu-16.7.4.tgz", - "integrity": "sha512-W1u4O78lTHCwvUP0vakeKWFXeSZ13nYzbd6FARICnImY2my8vz41rLm6aU9TYWaiOGEGL2xKpHKSgiNwbLjhFw==", + "version": "16.8.0", + "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm64-gnu/-/nx-linux-arm64-gnu-16.8.0.tgz", + "integrity": "sha512-Hc32BOQ9yw7oS+rHYAlRYZ4rW+YDsGHiUAcKekFh6WtKvj49OpXUfNw8dNzPuCmohi0Nvpm96TAi7rilRS79TQ==", "cpu": [ "arm64" ], @@ -5598,9 +5598,9 @@ } }, "node_modules/@nx/nx-linux-arm64-musl": { - "version": "16.7.4", - "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm64-musl/-/nx-linux-arm64-musl-16.7.4.tgz", - "integrity": "sha512-Dc8IQFvhfH/Z3GmhBBNNxGd2Ehw6Y5SePEgJj1c2JyPdoVtc2OjGzkUaZkT4z5z77VKtju6Yi10T6Enps+y+kw==", + "version": "16.8.0", + "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm64-musl/-/nx-linux-arm64-musl-16.8.0.tgz", + "integrity": "sha512-JsJyZswdPA5Wllh7xdusxogPKmiA/F4LzjFGy01sUy0DV3+5WJasp3VDNbl/o8v4f0BZ2/dfMlVJnF+hLBhK5g==", "cpu": [ "arm64" ], @@ -5614,9 +5614,9 @@ } }, "node_modules/@nx/nx-linux-x64-gnu": { - "version": "16.7.4", - "resolved": "https://registry.npmjs.org/@nx/nx-linux-x64-gnu/-/nx-linux-x64-gnu-16.7.4.tgz", - "integrity": "sha512-4B58C/pXeuovSznBOeicsxNieBApbGMoi2du8jR6Is1gYFPv4l8fFHQHHGAa1l5XJC5JuGJqFywS4elInWprNw==", + "version": "16.8.0", + "resolved": "https://registry.npmjs.org/@nx/nx-linux-x64-gnu/-/nx-linux-x64-gnu-16.8.0.tgz", + "integrity": "sha512-WpZ90jcbbTO5g5FtNpZRgpem7HCE3iBKOx0lG2xt7ZWd5JoypzZg9tEjHaDvCm6uNloUqZZigKnVyxZ/ulaq/Q==", "cpu": [ "x64" ], @@ -5630,9 +5630,9 @@ } }, "node_modules/@nx/nx-linux-x64-musl": { - "version": "16.7.4", - "resolved": "https://registry.npmjs.org/@nx/nx-linux-x64-musl/-/nx-linux-x64-musl-16.7.4.tgz", - "integrity": "sha512-spqqvEdGSSeV2ByJHkex5m8MRQfM6lQlnon25XgVBdPR47lKMWSikUsaWCiE7bVAFU9BFyWY2L4HfZ4+LiNY7A==", + "version": "16.8.0", + "resolved": "https://registry.npmjs.org/@nx/nx-linux-x64-musl/-/nx-linux-x64-musl-16.8.0.tgz", + "integrity": "sha512-iuOT42XEN/NPytNrZLB/V1WHbqletE4q2V3GxY08OFay6jyjA3CZWhUQ0IhiqXs2MXlbeKZM1Y9M8ogXr1bLHA==", "cpu": [ "x64" ], @@ -5646,9 +5646,9 @@ } }, "node_modules/@nx/nx-win32-arm64-msvc": { - "version": "16.7.4", - "resolved": "https://registry.npmjs.org/@nx/nx-win32-arm64-msvc/-/nx-win32-arm64-msvc-16.7.4.tgz", - "integrity": "sha512-etNnbuCcSqAYOeDcS6si6qw0WR/IS87ovTzLS17ETKpdHcHN5nM4l02CQyupKiD58ShxrXHxXmvgBfbXxoN5Ew==", + "version": "16.8.0", + "resolved": "https://registry.npmjs.org/@nx/nx-win32-arm64-msvc/-/nx-win32-arm64-msvc-16.8.0.tgz", + "integrity": "sha512-zB9EekQAc9DAp8G+2bvO4ko/jJJRDEN9Si+J/xMMCfTNWQE3+JJqqbN9P48Z3UKYZcm2DFRJFPA1Qfy5lv/MNA==", "cpu": [ "arm64" ], @@ -5662,9 +5662,9 @@ } }, "node_modules/@nx/nx-win32-x64-msvc": { - "version": "16.7.4", - "resolved": "https://registry.npmjs.org/@nx/nx-win32-x64-msvc/-/nx-win32-x64-msvc-16.7.4.tgz", - "integrity": "sha512-y6pugK6ino1wvo2FbgtXG2cVbEm3LzJwOSBKBRBXSWhUgjP7T92uGfOt6KVQKpaqDvS9lA9TO/2DcygcLHXh7A==", + "version": "16.8.0", + "resolved": "https://registry.npmjs.org/@nx/nx-win32-x64-msvc/-/nx-win32-x64-msvc-16.8.0.tgz", + "integrity": "sha512-PvF3hvsMFqN90t3GldLAdVW+qEr1J3g18t6QdnRHL39I4+BYCXip1hzWlK+aOP+TxQuZaSbVMMChZQw1eC97LA==", "cpu": [ "x64" ], @@ -9129,9 +9129,9 @@ } }, "node_modules/@types/lodash": { - "version": "4.14.197", - "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.197.tgz", - "integrity": "sha512-BMVOiWs0uNxHVlHBgzTIqJYmj+PgCo4euloGF+5m4okL3rEYzM2EEv78mw8zWSMM57dM7kVIgJ2QDvwHSoCI5g==" + "version": "4.14.198", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.198.tgz", + "integrity": "sha512-trNJ/vtMZYMLhfN45uLq4ShQSw0/S7xCTLLVM+WM1rmFpba/VS42jVUgaO3w/NOLiWR/09lnYk0yMaA/atdIsg==" }, "node_modules/@types/lodash.mergewith": { "version": "4.6.7", @@ -18447,13 +18447,13 @@ } }, "node_modules/nx": { - "version": "16.7.4", - "resolved": "https://registry.npmjs.org/nx/-/nx-16.7.4.tgz", - "integrity": "sha512-L0Cbikk5kO+IBH0UQ2BOAut5ndeHXBlACKzjOPOCluY8WYh2sxWYt9/N/juFBN3XXRX7ionTr1PhWUzNE0Mzqw==", + "version": "16.8.0", + "resolved": "https://registry.npmjs.org/nx/-/nx-16.8.0.tgz", + "integrity": "sha512-n32nk+y0h5iBuyxBvZJ4YJlFzs/ovT1q9mEXBkXWYgZp74t8nFu5qkLD/ndIOvw/9bvyw4/894vzb6uNDp8jBQ==", "dev": true, "hasInstallScript": true, "dependencies": { - "@nrwl/tao": "16.7.4", + "@nrwl/tao": "16.8.0", "@parcel/watcher": "2.0.4", "@yarnpkg/lockfile": "^1.1.0", "@yarnpkg/parsers": "3.0.0-rc.46", @@ -18464,6 +18464,7 @@ "cli-spinners": "2.6.1", "cliui": "^7.0.2", "dotenv": "~16.3.1", + "dotenv-expand": "~10.0.0", "enquirer": "~2.3.6", "fast-glob": "3.2.7", "figures": "3.2.0", @@ -18493,16 +18494,16 @@ "nx": "bin/nx.js" }, "optionalDependencies": { - "@nx/nx-darwin-arm64": "16.7.4", - "@nx/nx-darwin-x64": "16.7.4", - "@nx/nx-freebsd-x64": "16.7.4", - "@nx/nx-linux-arm-gnueabihf": "16.7.4", - "@nx/nx-linux-arm64-gnu": "16.7.4", - "@nx/nx-linux-arm64-musl": "16.7.4", - "@nx/nx-linux-x64-gnu": "16.7.4", - "@nx/nx-linux-x64-musl": "16.7.4", - "@nx/nx-win32-arm64-msvc": "16.7.4", - "@nx/nx-win32-x64-msvc": "16.7.4" + "@nx/nx-darwin-arm64": "16.8.0", + "@nx/nx-darwin-x64": "16.8.0", + "@nx/nx-freebsd-x64": "16.8.0", + "@nx/nx-linux-arm-gnueabihf": "16.8.0", + "@nx/nx-linux-arm64-gnu": "16.8.0", + "@nx/nx-linux-arm64-musl": "16.8.0", + "@nx/nx-linux-x64-gnu": "16.8.0", + "@nx/nx-linux-x64-musl": "16.8.0", + "@nx/nx-win32-arm64-msvc": "16.8.0", + "@nx/nx-win32-x64-msvc": "16.8.0" }, "peerDependencies": { "@swc-node/register": "^1.4.2", @@ -21077,9 +21078,9 @@ } }, "node_modules/rollup": { - "version": "3.28.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.28.1.tgz", - "integrity": "sha512-R9OMQmIHJm9znrU3m3cpE8uhN0fGdXiawME7aZIpQqvpS/85+Vt1Hq1/yVIcYfOmaQiHjvXkQAoJukvLpau6Yw==", + "version": "3.29.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.0.tgz", + "integrity": "sha512-nszM8DINnx1vSS+TpbWKMkxem0CDWk3cSit/WWCBVs9/JZ1I/XLwOsiUglYuYReaeWWSsW9kge5zE5NZtf/a4w==", "dev": true, "bin": { "rollup": "dist/bin/rollup" @@ -23624,8 +23625,7 @@ "dependencies": { "@web3modal/core": "3.0.0-alpha.5", "@web3modal/ui": "3.0.0-alpha.5", - "lit": "2.8.0", - "motion": "10.16.2" + "lit": "2.8.0" } }, "packages/scaffold/node_modules/lit": { @@ -23644,6 +23644,7 @@ "license": "Apache-2.0", "dependencies": { "lit": "2.8.0", + "motion": "10.16.2", "qrcode": "1.5.3" }, "devDependencies": { diff --git a/packages/ui/src/composites/wui-tabs/index.ts b/packages/ui/src/composites/wui-tabs/index.ts index 0a61ec3b6b..572c0f6012 100644 --- a/packages/ui/src/composites/wui-tabs/index.ts +++ b/packages/ui/src/composites/wui-tabs/index.ts @@ -50,7 +50,7 @@ export class WuiTabs extends LitElement { this.buttons = [...this.shadowRoot.querySelectorAll('button')] setTimeout(() => { this.animateTabs(0, true) - }, 0.1) + }, 0) } }