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/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 77c318c0fa..572c0f6012 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,36 +14,88 @@ 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: ${isDense ? '80px' : '100px'} + --local-tab-width: ${this.localTabWidth}; ` + 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) + }, 0) + } + } + // -- Private ------------------------------------------- // private onTabClick(index: number) { + if (this.buttons) { + this.animateTabs(index, false) + } this.activeTab = index this.onTabChange(index) } + + 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 }) + } + + 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: initialAnimation ? 0 : 0.5, delay: initialAnimation ? 0 : 0.1 } + ) + + animate( + activeBtnText, + { opacity: 1 }, + { duration: initialAnimation ? 0 : 0.25, delay: initialAnimation ? 0 : 0.15 } + ) + } + } } declare global { diff --git a/packages/ui/src/composites/wui-tabs/styles.ts b/packages/ui/src/composites/wui-tabs/styles.ts index df122b866d..7a243ef803 100644 --- a/packages/ui/src/composites/wui-tabs/styles.ts +++ b/packages/ui/src/composites/wui-tabs/styles.ts @@ -27,6 +27,22 @@ 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) / 1.85)); + } + + :host([data-type='flex']) { + display: flex; + padding: 0px 12px; + gap: 28px; + } + + :host([data-type='flex']) > button > wui-text { + position: absolute; + left: 18px; + opacity: 0; + } + button[data-active='true'] > wui-icon, button[data-active='true'] > wui-text { color: var(--wui-color-fg-100); @@ -39,6 +55,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 +63,13 @@ export default css` width: var(--local-tab-width); } + :host([data-type='flex']) > button { + width: 20px; + position: relative; + display: flex; + justify-content: flex-start; + } + button:hover:enabled, button:active:enabled { background-color: transparent !important;