From def2c401786536acfcc97261d33aa8867d61dc48 Mon Sep 17 00:00:00 2001 From: Ilja Date: Fri, 28 Jul 2023 11:49:00 +0300 Subject: [PATCH 01/14] fix deeplink prompt not being triggered on mobile --- apps/gallery/package.json | 2 +- apps/laboratory/package.json | 4 +- package-lock.json | 136 ++++++++++-------- package.json | 2 +- .../w3m-connecting-wc-mobile/index.ts | 13 ++ 5 files changed, 95 insertions(+), 62 deletions(-) diff --git a/apps/gallery/package.json b/apps/gallery/package.json index 0cd11fb0f9..91cae5b0a6 100644 --- a/apps/gallery/package.json +++ b/apps/gallery/package.json @@ -19,6 +19,6 @@ "@storybook/theming": "7.1.1", "@storybook/web-components": "7.1.1", "@storybook/web-components-vite": "7.1.1", - "file-system-cache": "2.4.2" + "file-system-cache": "2.4.3" } } diff --git a/apps/laboratory/package.json b/apps/laboratory/package.json index dacc2b6648..0937276147 100644 --- a/apps/laboratory/package.json +++ b/apps/laboratory/package.json @@ -12,8 +12,8 @@ "@emotion/react": "11.11.1", "@emotion/styled": "11.11.0", "next": "13.4.12", - "framer-motion": "10.13.1", + "framer-motion": "10.14.0", "wagmi": "1.3.9", - "viem": "1.4.1" + "viem": "1.4.2" } } diff --git a/package-lock.json b/package-lock.json index 43d40bce47..4bdf8c7738 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,7 @@ "@typescript-eslint/parser": "6.2.0", "danger": "11.2.7", "eslint": "8.45.0", - "eslint-config-prettier": "8.8.0", + "eslint-config-prettier": "8.9.0", "lerna": "7.1.4", "prettier": "3.0.0", "react": "18.2.0", @@ -46,7 +46,7 @@ "@storybook/theming": "7.1.1", "@storybook/web-components": "7.1.1", "@storybook/web-components-vite": "7.1.1", - "file-system-cache": "2.4.2" + "file-system-cache": "2.4.3" } }, "apps/laboratory": { @@ -57,9 +57,9 @@ "@emotion/react": "11.11.1", "@emotion/styled": "11.11.0", "@web3modal/wagmi": "3.0.0", - "framer-motion": "10.13.1", + "framer-motion": "10.14.0", "next": "13.4.12", - "viem": "1.4.1", + "viem": "1.4.2", "wagmi": "1.3.9" } }, @@ -4063,9 +4063,9 @@ } }, "node_modules/@jest/transform": { - "version": "29.6.1", - "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-29.6.1.tgz", - "integrity": "sha512-URnTneIU3ZjRSaf906cvf6Hpox3hIeJXRnz3VDSw5/X93gR8ycdfSIEy19FlVx8NFmpN7fe3Gb1xF+NjXaQLWg==", + "version": "29.6.2", + "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-29.6.2.tgz", + "integrity": "sha512-ZqCqEISr58Ce3U+buNFJYUktLJZOggfyvR+bZMaiV1e8B1SIvJbwZMrYz3gx/KAPn9EXmOmN+uB08yLCjWkQQg==", "dev": true, "dependencies": { "@babel/core": "^7.11.6", @@ -4076,9 +4076,9 @@ "convert-source-map": "^2.0.0", "fast-json-stable-stringify": "^2.1.0", "graceful-fs": "^4.2.9", - "jest-haste-map": "^29.6.1", + "jest-haste-map": "^29.6.2", "jest-regex-util": "^29.4.3", - "jest-util": "^29.6.1", + "jest-util": "^29.6.2", "micromatch": "^4.0.4", "pirates": "^4.0.4", "slash": "^3.0.0", @@ -7743,6 +7743,16 @@ "resolved": "https://registry.npmjs.org/@types/find-cache-dir/-/find-cache-dir-3.2.1.tgz", "integrity": "sha512-frsJrz2t/CeGifcu/6uRo4b+SzAwT4NYCVPu1GN8IB9XTzrpPkGuV0tmh9mN+/L0PklAlsC3u5Fxt0ju00LXIw==" }, + "node_modules/@types/fs-extra": { + "version": "11.0.1", + "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-11.0.1.tgz", + "integrity": "sha512-MxObHvNl4A69ofaTRU8DFqvgzzv8s9yRtaPPm5gud9HDNvpB3GPQFvNuTWAI59B9huVGV5jXYJwbCsmBsOGYWA==", + "dev": true, + "dependencies": { + "@types/jsonfile": "*", + "@types/node": "*" + } + }, "node_modules/@types/graceful-fs": { "version": "4.1.6", "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.6.tgz", @@ -7793,6 +7803,15 @@ "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==", "dev": true }, + "node_modules/@types/jsonfile": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@types/jsonfile/-/jsonfile-6.1.1.tgz", + "integrity": "sha512-GSgiRCVeapDN+3pqA35IkQwasaCh/0YFH5dEF6S88iDvEn901DjOeH3/QPY+XYP1DFzDZPvIvfeEgk+7br5png==", + "dev": true, + "dependencies": { + "@types/node": "*" + } + }, "node_modules/@types/keyv": { "version": "3.1.4", "resolved": "https://registry.npmjs.org/@types/keyv/-/keyv-3.1.4.tgz", @@ -10698,9 +10717,9 @@ } }, "node_modules/core-js": { - "version": "3.31.1", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.31.1.tgz", - "integrity": "sha512-2sKLtfq1eFST7l7v62zaqXacPc7uG8ZAya8ogijLhTtaKNcpzpB4TMoTw2Si+8GYKRwFPMMtUT0263QFWFfqyQ==", + "version": "3.32.0", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.32.0.tgz", + "integrity": "sha512-rd4rYZNlF3WuoYuRIDEmbR/ga9CeuWX9U05umAvgrrZoHY4Z++cp/xwPQMvUpBB4Ag6J8KfD80G0zwCyaSxDww==", "dev": true, "hasInstallScript": true, "funding": { @@ -10709,9 +10728,9 @@ } }, "node_modules/core-js-compat": { - "version": "3.31.1", - "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.31.1.tgz", - "integrity": "sha512-wIDWd2s5/5aJSdpOJHfSibxNODxoGoWOBHt8JSPB41NOE94M7kuTPZCYLOlTtuoXTsBPKobpJ6T+y0SSy5L9SA==", + "version": "3.32.0", + "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.32.0.tgz", + "integrity": "sha512-7a9a3D1k4UCVKnLhrgALyFcP7YCsLOQIxPd0dKjf/6GuPcgyiGP70ewWdCGrSK7evyhymi0qO4EqCmSJofDeYw==", "dependencies": { "browserslist": "^4.21.9" }, @@ -11303,9 +11322,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.471", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.471.tgz", - "integrity": "sha512-GpmGRC1vTl60w/k6YpQ18pSiqnmr0j3un//5TV1idPi6aheNfkT1Ye71tMEabWyNDO6sBMgAR+95Eb0eUUr1tA==" + "version": "1.4.475", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.475.tgz", + "integrity": "sha512-mTye5u5P98kSJO2n7zYALhpJDmoSQejIGya0iR01GpoRady8eK3bw7YHHnjA1Rfi4ZSLdpuzlAC7Zw+1Zu7Z6A==" }, "node_modules/emoji-regex": { "version": "8.0.0", @@ -11552,9 +11571,9 @@ } }, "node_modules/eslint-config-prettier": { - "version": "8.8.0", - "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz", - "integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==", + "version": "8.9.0", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.9.0.tgz", + "integrity": "sha512-+sbni7NfVXnOpnRadUA8S28AUlsZt9GjgFvABIRL9Hkn8KqNzOp+7Lw4QWtrwn20KzU3wqu1QoOj2m+7rKRqkA==", "dev": true, "bin": { "eslint-config-prettier": "bin/cli.js" @@ -12149,9 +12168,9 @@ "dev": true }, "node_modules/fast-redact": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/fast-redact/-/fast-redact-3.2.0.tgz", - "integrity": "sha512-zaTadChr+NekyzallAMXATXLOR8MNx3zqpZ0MUF2aGf4EathnG0f32VLODNlY8IuGY3HoRO2L6/6fSzNsLaHIw==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/fast-redact/-/fast-redact-3.3.0.tgz", + "integrity": "sha512-6T5V1QK1u4oF+ATxs1lWUmlEk6P2T9HqJG3e2DnHOdVgZy2rFJBoEnrIedcTXlkAHU/zKC+7KETJ+KGGKwxgMQ==", "engines": { "node": ">=6" } @@ -12224,11 +12243,12 @@ } }, "node_modules/file-system-cache": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/file-system-cache/-/file-system-cache-2.4.2.tgz", - "integrity": "sha512-33ALMyc8nFwrb7p5+Dl0rmYUY48hHoYvFQhH7zpr08DJ68xR41PONJaYQ5XRj61CFq/hvoj680Ej/P9hoOU4eQ==", + "version": "2.4.3", + "resolved": "https://registry.npmjs.org/file-system-cache/-/file-system-cache-2.4.3.tgz", + "integrity": "sha512-wBJ+ysm8ma2m7bNYKu72ZZ02LfypRg00AYdG9w2sbpOsu9KgHGQ4mJEGoAWYjAr+C+9jf1Q1ZwBqTB4Rdz0upA==", "dev": true, "dependencies": { + "@types/fs-extra": "11.0.1", "@types/ramda": "0.29.3", "fs-extra": "11.1.1", "ramda": "0.29.0" @@ -12474,9 +12494,9 @@ } }, "node_modules/framer-motion": { - "version": "10.13.1", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.13.1.tgz", - "integrity": "sha512-uiKsaLEoySeln3eOPy8wUB3FkNtRRiVga5xJOkgs7C0sHVyvpJajXJFSoabt+emBojgnMQY0epnjl0ppoYPxkQ==", + "version": "10.14.0", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.14.0.tgz", + "integrity": "sha512-XMZCbki8+9+D9of6P0cFtGrSGItNvXUJqvGI8O5v5aSvprA3PNlcpgfLEfTIZ9woNuZtYv56dprktuQ+S2welw==", "dependencies": { "tslib": "^2.4.0" }, @@ -14105,15 +14125,15 @@ } }, "node_modules/jest-diff": { - "version": "29.6.1", - "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.6.1.tgz", - "integrity": "sha512-FsNCvinvl8oVxpNLttNQX7FAq7vR+gMDGj90tiP7siWw1UdakWUGqrylpsYrpvj908IYckm5Y0Q7azNAozU1Kg==", + "version": "29.6.2", + "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.6.2.tgz", + "integrity": "sha512-t+ST7CB9GX5F2xKwhwCf0TAR17uNDiaPTZnVymP9lw0lssa9vG+AFyDZoeIHStU3WowFFwT+ky+er0WVl2yGhA==", "dev": true, "dependencies": { "chalk": "^4.0.0", "diff-sequences": "^29.4.3", "jest-get-type": "^29.4.3", - "pretty-format": "^29.6.1" + "pretty-format": "^29.6.2" }, "engines": { "node": "^14.15.0 || ^16.10.0 || >=18.0.0" @@ -14199,9 +14219,9 @@ } }, "node_modules/jest-haste-map": { - "version": "29.6.1", - "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-29.6.1.tgz", - "integrity": "sha512-0m7f9PZXxOCk1gRACiVgX85knUKPKLPg4oRCjLoqIm9brTHXaorMA0JpmtmVkQiT8nmXyIVoZd/nnH1cfC33ig==", + "version": "29.6.2", + "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-29.6.2.tgz", + "integrity": "sha512-+51XleTDAAysvU8rT6AnS1ZJ+WHVNqhj1k6nTvN2PYP+HjU3kqlaKQ1Lnw3NYW3bm2r8vq82X0Z1nDDHZMzHVA==", "dev": true, "dependencies": { "@jest/types": "^29.6.1", @@ -14211,8 +14231,8 @@ "fb-watchman": "^2.0.0", "graceful-fs": "^4.2.9", "jest-regex-util": "^29.4.3", - "jest-util": "^29.6.1", - "jest-worker": "^29.6.1", + "jest-util": "^29.6.2", + "jest-worker": "^29.6.2", "micromatch": "^4.0.4", "walker": "^1.0.8" }, @@ -14233,9 +14253,9 @@ } }, "node_modules/jest-util": { - "version": "29.6.1", - "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.6.1.tgz", - "integrity": "sha512-NRFCcjc+/uO3ijUVyNOQJluf8PtGCe/W6cix36+M3cTFgiYqFOOW5MgN4JOOcvbUhcKTYVd1CvHz/LWi8d16Mg==", + "version": "29.6.2", + "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.6.2.tgz", + "integrity": "sha512-3eX1qb6L88lJNCFlEADKOkjpXJQyZRiavX1INZ4tRnrBVr2COd3RgcTLyUiEXMNBlDU/cgYq6taUS0fExrWW4w==", "dev": true, "dependencies": { "@jest/types": "^29.6.1", @@ -14320,13 +14340,13 @@ } }, "node_modules/jest-worker": { - "version": "29.6.1", - "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-29.6.1.tgz", - "integrity": "sha512-U+Wrbca7S8ZAxAe9L6nb6g8kPdia5hj32Puu5iOqBCMTMWFHXuK6dOV2IFrpedbTV8fjMFLdWNttQTBL6u2MRA==", + "version": "29.6.2", + "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-29.6.2.tgz", + "integrity": "sha512-l3ccBOabTdkng8I/ORCkADz4eSMKejTYv1vB/Z83UiubqhC1oQ5Li6dWCyqOIvSifGjUBxuvxvlm6KGK2DtuAQ==", "dev": true, "dependencies": { "@types/node": "*", - "jest-util": "^29.6.1", + "jest-util": "^29.6.2", "merge-stream": "^2.0.0", "supports-color": "^8.0.0" }, @@ -15626,9 +15646,9 @@ } }, "node_modules/magic-string": { - "version": "0.30.1", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.1.tgz", - "integrity": "sha512-mbVKXPmS0z0G4XqFDCTllmDQ6coZzn94aMlb0o/A4HEHJCKcanlDZwYJgwnkmgD3jyWhUgj9VsPrfd972yPffA==", + "version": "0.30.2", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.2.tgz", + "integrity": "sha512-lNZdu7pewtq/ZvWUp9Wpf/x7WzMTsR26TWV03BRZrXFsv+BI6dy8RAiKgm1uM/kyR0rCfUcqvOlXKG66KhIGug==", "dev": true, "dependencies": { "@jridgewell/sourcemap-codec": "^1.4.15" @@ -16729,9 +16749,9 @@ } }, "node_modules/npm-pick-manifest": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/npm-pick-manifest/-/npm-pick-manifest-8.0.1.tgz", - "integrity": "sha512-mRtvlBjTsJvfCCdmPtiu2bdlx8d/KXtF7yNXNWe7G0Z36qWA9Ny5zXsI2PfBZEv7SXgoxTmNaTzGSbbzDZChoA==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/npm-pick-manifest/-/npm-pick-manifest-8.0.2.tgz", + "integrity": "sha512-1dKY+86/AIiq1tkKVD3l0WI+Gd3vkknVGAggsFeBkTvbhMQ1OND/LKkYv4JtXPKUJ8bOTCyLiqEg2P6QNdK+Gg==", "dev": true, "dependencies": { "npm-install-checks": "^6.0.0", @@ -18117,9 +18137,9 @@ } }, "node_modules/pretty-format": { - "version": "29.6.1", - "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.6.1.tgz", - "integrity": "sha512-7jRj+yXO0W7e4/tSJKoR7HRIHLPPjtNaUGG2xxKQnGvPNRkgWcQ0AZX6P4KBRJN4FcTBWb3sa7DVUJmocYuoog==", + "version": "29.6.2", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.6.2.tgz", + "integrity": "sha512-1q0oC8eRveTg5nnBEWMXAU2qpv65Gnuf2eCQzSjxpWFkPaPARwqZZDGuNE0zPAZfTCHzIk3A8dIjwlQKKLphyg==", "dev": true, "dependencies": { "@jest/schemas": "^29.6.0", @@ -21173,9 +21193,9 @@ } }, "node_modules/viem": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/viem/-/viem-1.4.1.tgz", - "integrity": "sha512-MtaoBHDSJDqa+QyXKG5d+S6EQSebRO0tzw6anSP4zC7AbC614vMeg9Y8LbkmEkWCw8swFYkort+H9l7GkWB0uA==", + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/viem/-/viem-1.4.2.tgz", + "integrity": "sha512-125E7HoOr5PrL+Iwt8853dQexwRoiPpLwPsrRvlDX94su2xoe7AYqrdfR6N9nmy6vd6mt8eQy8+LWiP3A+1dqw==", "dependencies": { "@adraffy/ens-normalize": "1.9.0", "@noble/curves": "1.0.0", diff --git a/package.json b/package.json index cf005cf7b8..254d58e41e 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "@types/react": "18.2.17", "@types/react-dom": "18.2.7", "eslint": "8.45.0", - "eslint-config-prettier": "8.8.0", + "eslint-config-prettier": "8.9.0", "lerna": "7.1.4", "prettier": "3.0.0", "typescript": "5.1.6", diff --git a/packages/scaffold-html/src/partials/w3m-connecting-wc-mobile/index.ts b/packages/scaffold-html/src/partials/w3m-connecting-wc-mobile/index.ts index 020e2abd31..2f9ef9402f 100644 --- a/packages/scaffold-html/src/partials/w3m-connecting-wc-mobile/index.ts +++ b/packages/scaffold-html/src/partials/w3m-connecting-wc-mobile/index.ts @@ -24,6 +24,8 @@ export class W3mConnectingWcMobile extends LitElement { @state() private uri = ConnectionController.state.wcUri + @state() private ready = false + @property({ type: Boolean }) public multiPlatfrom = false public constructor() { @@ -42,6 +44,8 @@ export class W3mConnectingWcMobile extends LitElement { throw new Error('w3m-connecting-wc-mobile: No listing provided') } + this.isReady() + const label = `Continue in ${this.listing.name}` const subLabel = this.error ? 'Connection declined' : 'Accept connection request in the wallet' @@ -58,6 +62,15 @@ export class W3mConnectingWcMobile extends LitElement { } // -- Private ------------------------------------------- // + private isReady() { + if (!this.ready && this.uri) { + this.timeout = setTimeout(() => { + this.ready = true + this.onConnect() + }, 250) + } + } + private onConnect() { if (this.listing && this.uri) { try { From 1b1320e502403d468331a4d5ce6d078c78683e27 Mon Sep 17 00:00:00 2001 From: Ilja Date: Fri, 28 Jul 2023 12:32:05 +0300 Subject: [PATCH 02/14] save progress --- .../stories/composites/wui-tabs.stories.ts | 18 ++++++++++ packages/ui/index.ts | 1 + packages/ui/src/composites/wui-tabs/index.ts | 28 ++++++++++++++++ packages/ui/src/composites/wui-tabs/styles.ts | 33 +++++++++++++++++++ 4 files changed, 80 insertions(+) create mode 100644 apps/gallery/stories/composites/wui-tabs.stories.ts create mode 100644 packages/ui/src/composites/wui-tabs/index.ts create mode 100644 packages/ui/src/composites/wui-tabs/styles.ts diff --git a/apps/gallery/stories/composites/wui-tabs.stories.ts b/apps/gallery/stories/composites/wui-tabs.stories.ts new file mode 100644 index 0000000000..3c39cd68d5 --- /dev/null +++ b/apps/gallery/stories/composites/wui-tabs.stories.ts @@ -0,0 +1,18 @@ +import type { Meta } from '@storybook/web-components' +import '@web3modal/ui/src/composites/wui-tabs' +import type { WuiTabs } from '@web3modal/ui/src/composites/wui-tabs' +import { html } from 'lit' + +type Component = Meta + +export default { + title: 'Composites/wui-tabs', + args: {}, + + argTypes: {} +} as Component + +export const Default: Component = { + render: args => + html` onetwothree` +} diff --git a/packages/ui/index.ts b/packages/ui/index.ts index f4fae6684e..dea3194dbc 100644 --- a/packages/ui/index.ts +++ b/packages/ui/index.ts @@ -30,6 +30,7 @@ export * from './src/composites/wui-otp' export * from './src/composites/wui-qr-code' export * from './src/composites/wui-search-bar' export * from './src/composites/wui-snackbar' +export * from './src/composites/wui-tabs' export * from './src/composites/wui-tag' export * from './src/composites/wui-tooltip' export * from './src/composites/wui-transaction-visual' diff --git a/packages/ui/src/composites/wui-tabs/index.ts b/packages/ui/src/composites/wui-tabs/index.ts new file mode 100644 index 0000000000..f9066b7996 --- /dev/null +++ b/packages/ui/src/composites/wui-tabs/index.ts @@ -0,0 +1,28 @@ +import { html, LitElement } from 'lit' +import { customElement } from 'lit/decorators.js' +import '../../components/wui-text' +import { resetStyles } from '../../utils/ThemeUtil' +import '../wui-icon-box' +import styles from './styles' + +@customElement('wui-tabs') +export class WuiTabs extends LitElement { + public static styles = [resetStyles, styles] + + // -- State & Properties -------------------------------- // + + public firstUpdated() { + const slot = this.shadowRoot?.querySelector('slot') + } + + // -- Render -------------------------------------------- // + public render() { + return html`` + } +} + +declare global { + interface HTMLElementTagNameMap { + 'wui-tabs': WuiTabs + } +} diff --git a/packages/ui/src/composites/wui-tabs/styles.ts b/packages/ui/src/composites/wui-tabs/styles.ts new file mode 100644 index 0000000000..78444a5bc2 --- /dev/null +++ b/packages/ui/src/composites/wui-tabs/styles.ts @@ -0,0 +1,33 @@ +import { css } from 'lit' + +export default css` + :host { + display: flex; + background-color: var(--wui-overlay-002); + border-radius: var(--wui-border-radius-3xl); + padding: var(--wui-spacing-3xs); + position: relative; + height: 36px; + } + + :host::before { + content: ''; + position: absolute; + pointer-events: none; + top: 4px; + left: 4px; + display: block; + width: 100px; + height: 28px; + border-radius: var(--wui-border-radius-3xl); + background-color: var(--wui-overlay-002); + box-shadow: inset 0 0 0 1px var(--wui-overlay-002); + } + + ::slotted(*) { + width: 100px; + display: flex; + align-items: center; + justify-content: center; + } +` From ae5e2b1f5dc2e74eb4d5bca496137d32d38d68b5 Mon Sep 17 00:00:00 2001 From: Ilja Date: Fri, 28 Jul 2023 13:02:02 +0300 Subject: [PATCH 03/14] save progress --- packages/ui/src/composites/wui-tabs/index.ts | 11 ++++------- packages/ui/src/composites/wui-tabs/styles.ts | 2 ++ 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/ui/src/composites/wui-tabs/index.ts b/packages/ui/src/composites/wui-tabs/index.ts index f9066b7996..efb4cabe37 100644 --- a/packages/ui/src/composites/wui-tabs/index.ts +++ b/packages/ui/src/composites/wui-tabs/index.ts @@ -1,8 +1,6 @@ import { html, LitElement } from 'lit' -import { customElement } from 'lit/decorators.js' -import '../../components/wui-text' +import { customElement, property } from 'lit/decorators.js' import { resetStyles } from '../../utils/ThemeUtil' -import '../wui-icon-box' import styles from './styles' @customElement('wui-tabs') @@ -10,13 +8,12 @@ export class WuiTabs extends LitElement { public static styles = [resetStyles, styles] // -- State & Properties -------------------------------- // - - public firstUpdated() { - const slot = this.shadowRoot?.querySelector('slot') - } + @property({ type: Number }) public selectedTab = 0 // -- Render -------------------------------------------- // public render() { + this.style.cssText = `--local-tab: ${this.selectedTab};` + return html`` } } diff --git a/packages/ui/src/composites/wui-tabs/styles.ts b/packages/ui/src/composites/wui-tabs/styles.ts index 78444a5bc2..02ce51c21c 100644 --- a/packages/ui/src/composites/wui-tabs/styles.ts +++ b/packages/ui/src/composites/wui-tabs/styles.ts @@ -22,6 +22,8 @@ export default css` border-radius: var(--wui-border-radius-3xl); background-color: var(--wui-overlay-002); box-shadow: inset 0 0 0 1px var(--wui-overlay-002); + transform: translateX(calc(var(--local-tab) * 100px)); + transition: transform var(--wui-ease-in-power-3) var(--wui-duration-lg); } ::slotted(*) { From 80a2981d4bbeaeb3b4f1857134102c2beb1ef57f Mon Sep 17 00:00:00 2001 From: Ilja Date: Fri, 28 Jul 2023 13:17:34 +0300 Subject: [PATCH 04/14] save progress --- .../stories/composites/wui-tabs.stories.ts | 12 +++++++--- packages/ui/src/composites/wui-tabs/index.ts | 23 +++++++++++++++---- packages/ui/src/composites/wui-tabs/styles.ts | 8 +++---- 3 files changed, 30 insertions(+), 13 deletions(-) diff --git a/apps/gallery/stories/composites/wui-tabs.stories.ts b/apps/gallery/stories/composites/wui-tabs.stories.ts index 3c39cd68d5..11987e4ac8 100644 --- a/apps/gallery/stories/composites/wui-tabs.stories.ts +++ b/apps/gallery/stories/composites/wui-tabs.stories.ts @@ -7,12 +7,18 @@ type Component = Meta export default { title: 'Composites/wui-tabs', - args: {}, + args: { + tabs: [ + { icon: 'checkmark', label: 'one' }, + { icon: 'checkmark', label: 'two' }, + { icon: 'checkmark', label: 'three' } + ], + activeTab: 1 + }, argTypes: {} } as Component export const Default: Component = { - render: args => - html` onetwothree` + render: args => html`` } diff --git a/packages/ui/src/composites/wui-tabs/index.ts b/packages/ui/src/composites/wui-tabs/index.ts index efb4cabe37..83f67fb0ff 100644 --- a/packages/ui/src/composites/wui-tabs/index.ts +++ b/packages/ui/src/composites/wui-tabs/index.ts @@ -1,20 +1,33 @@ import { html, LitElement } from 'lit' import { customElement, property } from 'lit/decorators.js' -import { resetStyles } from '../../utils/ThemeUtil' +import { elementStyles, resetStyles } from '../../utils/ThemeUtil' import styles from './styles' @customElement('wui-tabs') export class WuiTabs extends LitElement { - public static styles = [resetStyles, styles] + public static styles = [resetStyles, elementStyles, styles] // -- State & Properties -------------------------------- // - @property({ type: Number }) public selectedTab = 0 + @property({ type: Array }) tabs: { icon: string; label: string }[] = [] + + @property({ type: Number }) public activeTab = 0 // -- Render -------------------------------------------- // public render() { - this.style.cssText = `--local-tab: ${this.selectedTab};` + this.style.cssText = `--local-tab: ${this.activeTab};` + + return this.tabs.map((tab, index) => { + const isActive = index === this.activeTab - return html`` + return html` + + ` + }) } } diff --git a/packages/ui/src/composites/wui-tabs/styles.ts b/packages/ui/src/composites/wui-tabs/styles.ts index 02ce51c21c..326c5240e3 100644 --- a/packages/ui/src/composites/wui-tabs/styles.ts +++ b/packages/ui/src/composites/wui-tabs/styles.ts @@ -8,6 +8,7 @@ export default css` padding: var(--wui-spacing-3xs); position: relative; height: 36px; + overflow: hidden; } :host::before { @@ -23,13 +24,10 @@ export default css` background-color: var(--wui-overlay-002); box-shadow: inset 0 0 0 1px var(--wui-overlay-002); transform: translateX(calc(var(--local-tab) * 100px)); - transition: transform var(--wui-ease-in-power-3) var(--wui-duration-lg); + transition: transform var(--wui-ease-out-power-3) var(--wui-duration-lg); } - ::slotted(*) { + button { width: 100px; - display: flex; - align-items: center; - justify-content: center; } ` From 2392af134cf1a957721cceade96fe2706397cfd9 Mon Sep 17 00:00:00 2001 From: Ilja Date: Fri, 28 Jul 2023 13:52:37 +0300 Subject: [PATCH 05/14] stash --- .../gallery/stories/composites/wui-tabs.stories.ts | 6 +++--- packages/ui/src/composites/wui-tabs/index.ts | 14 ++++++++++---- packages/ui/src/composites/wui-tabs/styles.ts | 7 +++++++ 3 files changed, 20 insertions(+), 7 deletions(-) diff --git a/apps/gallery/stories/composites/wui-tabs.stories.ts b/apps/gallery/stories/composites/wui-tabs.stories.ts index 11987e4ac8..98522bf206 100644 --- a/apps/gallery/stories/composites/wui-tabs.stories.ts +++ b/apps/gallery/stories/composites/wui-tabs.stories.ts @@ -9,9 +9,9 @@ export default { title: 'Composites/wui-tabs', args: { tabs: [ - { icon: 'checkmark', label: 'one' }, - { icon: 'checkmark', label: 'two' }, - { icon: 'checkmark', label: 'three' } + { icon: 'mobile', label: 'Mobile' }, + { icon: 'extension', label: 'Extension' }, + { icon: 'desktop', label: 'Desktop' } ], activeTab: 1 }, diff --git a/packages/ui/src/composites/wui-tabs/index.ts b/packages/ui/src/composites/wui-tabs/index.ts index 83f67fb0ff..1aa3c63191 100644 --- a/packages/ui/src/composites/wui-tabs/index.ts +++ b/packages/ui/src/composites/wui-tabs/index.ts @@ -1,6 +1,7 @@ import { html, LitElement } from 'lit' -import { customElement, property } from 'lit/decorators.js' +import { customElement, property, state } from 'lit/decorators.js' import { elementStyles, resetStyles } from '../../utils/ThemeUtil' +import type { IconType } from '../../utils/TypesUtil' import styles from './styles' @customElement('wui-tabs') @@ -8,9 +9,9 @@ export class WuiTabs extends LitElement { public static styles = [resetStyles, elementStyles, styles] // -- State & Properties -------------------------------- // - @property({ type: Array }) tabs: { icon: string; label: string }[] = [] + @property({ type: Array }) tabs: { icon: IconType; label: string }[] = [] - @property({ type: Number }) public activeTab = 0 + @state() public activeTab = 0 // -- Render -------------------------------------------- // public render() { @@ -20,7 +21,7 @@ export class WuiTabs extends LitElement { const isActive = index === this.activeTab return html` -