Migrate React playground to Tailwind CSS v4 (#3695)
This PR bumps the internal React playground to use Tailwind CSS v4
This commit is contained in:
Robin Malfait
Generated
+558
-73
@@ -27,7 +27,7 @@
|
||||
"npm-run-all": "^4.1.5",
|
||||
"prettier": "^3.1.0",
|
||||
"prettier-plugin-organize-imports": "^3.2.4",
|
||||
"prettier-plugin-tailwindcss": "^0.5.7",
|
||||
"prettier-plugin-tailwindcss": "^0.6.11",
|
||||
"resize-observer-polyfill": "^1.5.1",
|
||||
"rimraf": "^3.0.2",
|
||||
"tslib": "^2.3.1",
|
||||
@@ -1900,6 +1900,7 @@
|
||||
"version": "0.11.0",
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
}
|
||||
@@ -2368,6 +2369,250 @@
|
||||
"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/node": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.3.tgz",
|
||||
"integrity": "sha512-H/6r6IPFJkCfBJZ2dKZiPJ7Ueb2wbL592+9bQEl2r73qbX6yGnmQVIfiUvDRB2YI0a3PWDrzUwkvQx1XW1bNkA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"enhanced-resolve": "^5.18.1",
|
||||
"jiti": "^2.4.2",
|
||||
"lightningcss": "1.29.2",
|
||||
"tailwindcss": "4.1.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/node/node_modules/jiti": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
|
||||
"integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"jiti": "lib/jiti-cli.mjs"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/node/node_modules/tailwindcss": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.3.tgz",
|
||||
"integrity": "sha512-2Q+rw9vy1WFXu5cIxlvsabCwhU2qUwodGq03ODhLJ0jW4ek5BUtoCsnLB0qG+m8AHgEsSJcJGDSDe06FXlP74g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.3.tgz",
|
||||
"integrity": "sha512-t16lpHCU7LBxDe/8dCj9ntyNpXaSTAgxWm1u2XQP5NiIu4KGSyrDJJRlK9hJ4U9yJxx0UKCVI67MJWFNll5mOQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@tailwindcss/oxide-android-arm64": "4.1.3",
|
||||
"@tailwindcss/oxide-darwin-arm64": "4.1.3",
|
||||
"@tailwindcss/oxide-darwin-x64": "4.1.3",
|
||||
"@tailwindcss/oxide-freebsd-x64": "4.1.3",
|
||||
"@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.3",
|
||||
"@tailwindcss/oxide-linux-arm64-gnu": "4.1.3",
|
||||
"@tailwindcss/oxide-linux-arm64-musl": "4.1.3",
|
||||
"@tailwindcss/oxide-linux-x64-gnu": "4.1.3",
|
||||
"@tailwindcss/oxide-linux-x64-musl": "4.1.3",
|
||||
"@tailwindcss/oxide-win32-arm64-msvc": "4.1.3",
|
||||
"@tailwindcss/oxide-win32-x64-msvc": "4.1.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-android-arm64": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.3.tgz",
|
||||
"integrity": "sha512-cxklKjtNLwFl3mDYw4XpEfBY+G8ssSg9ADL4Wm6//5woi3XGqlxFsnV5Zb6v07dxw1NvEX2uoqsxO/zWQsgR+g==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-darwin-arm64": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.3.tgz",
|
||||
"integrity": "sha512-mqkf2tLR5VCrjBvuRDwzKNShRu99gCAVMkVsaEOFvv6cCjlEKXRecPu9DEnxp6STk5z+Vlbh1M5zY3nQCXMXhw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-darwin-x64": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.3.tgz",
|
||||
"integrity": "sha512-7sGraGaWzXvCLyxrc7d+CCpUN3fYnkkcso3rCzwUmo/LteAl2ZGCDlGvDD8Y/1D3ngxT8KgDj1DSwOnNewKhmg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-freebsd-x64": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.3.tgz",
|
||||
"integrity": "sha512-E2+PbcbzIReaAYZe997wb9rId246yDkCwAakllAWSGqe6VTg9hHle67hfH6ExjpV2LSK/siRzBUs5wVff3RW9w==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"freebsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.3.tgz",
|
||||
"integrity": "sha512-GvfbJ8wjSSjbLFFE3UYz4Eh8i4L6GiEYqCtA8j2Zd2oXriPuom/Ah/64pg/szWycQpzRnbDiJozoxFU2oJZyfg==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.3.tgz",
|
||||
"integrity": "sha512-35UkuCWQTeG9BHcBQXndDOrpsnt3Pj9NVIB4CgNiKmpG8GnCNXeMczkUpOoqcOhO6Cc/mM2W7kaQ/MTEENDDXg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-linux-arm64-musl": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.3.tgz",
|
||||
"integrity": "sha512-dm18aQiML5QCj9DQo7wMbt1Z2tl3Giht54uVR87a84X8qRtuXxUqnKQkRDK5B4bCOmcZ580lF9YcoMkbDYTXHQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-linux-x64-gnu": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.3.tgz",
|
||||
"integrity": "sha512-LMdTmGe/NPtGOaOfV2HuO7w07jI3cflPrVq5CXl+2O93DCewADK0uW1ORNAcfu2YxDUS035eY2W38TxrsqngxA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-linux-x64-musl": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.3.tgz",
|
||||
"integrity": "sha512-aalNWwIi54bbFEizwl1/XpmdDrOaCjRFQRgtbv9slWjmNPuJJTIKPHf5/XXDARc9CneW9FkSTqTbyvNecYAEGw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.3.tgz",
|
||||
"integrity": "sha512-PEj7XR4OGTGoboTIAdXicKuWl4EQIjKHKuR+bFy9oYN7CFZo0eu74+70O4XuERX4yjqVZGAkCdglBODlgqcCXg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-win32-x64-msvc": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.3.tgz",
|
||||
"integrity": "sha512-T8gfxECWDBENotpw3HR9SmNiHC9AOJdxs+woasRZ8Q/J4VHN0OMs7F+4yVNZ9EVN26Wv6mZbK0jv7eHYuLJLwA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/postcss": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.3.tgz",
|
||||
"integrity": "sha512-6s5nJODm98F++QT49qn8xJKHQRamhYHfMi3X7/ltxiSQ9dyRsaFSfFkfaMsanWzf+TMYQtbk8mt5f6cCVXJwfg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@alloc/quick-lru": "^5.2.0",
|
||||
"@tailwindcss/node": "4.1.3",
|
||||
"@tailwindcss/oxide": "4.1.3",
|
||||
"postcss": "^8.4.41",
|
||||
"tailwindcss": "4.1.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/postcss/node_modules/tailwindcss": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.3.tgz",
|
||||
"integrity": "sha512-2Q+rw9vy1WFXu5cIxlvsabCwhU2qUwodGq03ODhLJ0jW4ek5BUtoCsnLB0qG+m8AHgEsSJcJGDSDe06FXlP74g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@tailwindcss/typography": {
|
||||
"version": "0.5.10",
|
||||
"license": "MIT",
|
||||
@@ -3343,41 +3588,6 @@
|
||||
"node": ">= 4.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/autoprefixer": {
|
||||
"version": "10.4.16",
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/postcss/"
|
||||
},
|
||||
{
|
||||
"type": "tidelift",
|
||||
"url": "https://tidelift.com/funding/github/npm/autoprefixer"
|
||||
},
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"browserslist": "^4.21.10",
|
||||
"caniuse-lite": "^1.0.30001538",
|
||||
"fraction.js": "^4.3.6",
|
||||
"normalize-range": "^0.1.2",
|
||||
"picocolors": "^1.0.0",
|
||||
"postcss-value-parser": "^4.2.0"
|
||||
},
|
||||
"bin": {
|
||||
"autoprefixer": "bin/autoprefixer"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || >=14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"postcss": "^8.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/available-typed-arrays": {
|
||||
"version": "1.0.5",
|
||||
"dev": true,
|
||||
@@ -3569,6 +3779,7 @@
|
||||
},
|
||||
"node_modules/browserslist": {
|
||||
"version": "4.22.2",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
@@ -4261,6 +4472,15 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/detect-libc": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
|
||||
"integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
|
||||
"license": "Apache-2.0",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/detect-newline": {
|
||||
"version": "3.1.0",
|
||||
"dev": true,
|
||||
@@ -4346,6 +4566,7 @@
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.4.617",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/emittery": {
|
||||
@@ -4376,6 +4597,19 @@
|
||||
"once": "^1.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/enhanced-resolve": {
|
||||
"version": "5.18.1",
|
||||
"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz",
|
||||
"integrity": "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"graceful-fs": "^4.2.4",
|
||||
"tapable": "^2.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
}
|
||||
},
|
||||
"node_modules/entities": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
|
||||
@@ -4869,6 +5103,7 @@
|
||||
},
|
||||
"node_modules/escalade": {
|
||||
"version": "3.1.1",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
@@ -5186,17 +5421,6 @@
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/fraction.js": {
|
||||
"version": "4.3.7",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": "*"
|
||||
},
|
||||
"funding": {
|
||||
"type": "patreon",
|
||||
"url": "https://github.com/sponsors/rawify"
|
||||
}
|
||||
},
|
||||
"node_modules/fragment-cache": {
|
||||
"version": "0.2.1",
|
||||
"dev": true,
|
||||
@@ -7108,6 +7332,234 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss": {
|
||||
"version": "1.29.2",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.29.2.tgz",
|
||||
"integrity": "sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==",
|
||||
"license": "MPL-2.0",
|
||||
"dependencies": {
|
||||
"detect-libc": "^2.0.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"lightningcss-darwin-arm64": "1.29.2",
|
||||
"lightningcss-darwin-x64": "1.29.2",
|
||||
"lightningcss-freebsd-x64": "1.29.2",
|
||||
"lightningcss-linux-arm-gnueabihf": "1.29.2",
|
||||
"lightningcss-linux-arm64-gnu": "1.29.2",
|
||||
"lightningcss-linux-arm64-musl": "1.29.2",
|
||||
"lightningcss-linux-x64-gnu": "1.29.2",
|
||||
"lightningcss-linux-x64-musl": "1.29.2",
|
||||
"lightningcss-win32-arm64-msvc": "1.29.2",
|
||||
"lightningcss-win32-x64-msvc": "1.29.2"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-darwin-arm64": {
|
||||
"version": "1.29.2",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.29.2.tgz",
|
||||
"integrity": "sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-darwin-x64": {
|
||||
"version": "1.29.2",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.29.2.tgz",
|
||||
"integrity": "sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-freebsd-x64": {
|
||||
"version": "1.29.2",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.29.2.tgz",
|
||||
"integrity": "sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"freebsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-linux-arm-gnueabihf": {
|
||||
"version": "1.29.2",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.29.2.tgz",
|
||||
"integrity": "sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-linux-arm64-gnu": {
|
||||
"version": "1.29.2",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.29.2.tgz",
|
||||
"integrity": "sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-linux-arm64-musl": {
|
||||
"version": "1.29.2",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.29.2.tgz",
|
||||
"integrity": "sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-linux-x64-gnu": {
|
||||
"version": "1.29.2",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.29.2.tgz",
|
||||
"integrity": "sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-linux-x64-musl": {
|
||||
"version": "1.29.2",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.29.2.tgz",
|
||||
"integrity": "sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-win32-arm64-msvc": {
|
||||
"version": "1.29.2",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.29.2.tgz",
|
||||
"integrity": "sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-win32-x64-msvc": {
|
||||
"version": "1.29.2",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.29.2.tgz",
|
||||
"integrity": "sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lilconfig": {
|
||||
"version": "2.0.5",
|
||||
"dev": true,
|
||||
@@ -7625,7 +8077,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "3.3.7",
|
||||
"version": "3.3.11",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
|
||||
"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
@@ -7827,6 +8281,7 @@
|
||||
},
|
||||
"node_modules/node-releases": {
|
||||
"version": "2.0.14",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/nopt": {
|
||||
@@ -7869,13 +8324,6 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/normalize-range": {
|
||||
"version": "0.1.2",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/npm-run-all": {
|
||||
"version": "4.1.5",
|
||||
"dev": true,
|
||||
@@ -8328,7 +8776,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/picocolors": {
|
||||
"version": "1.0.0",
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
|
||||
"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/picomatch": {
|
||||
@@ -8470,9 +8920,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.4.38",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
|
||||
"integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
|
||||
"version": "8.5.3",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
|
||||
"integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
@@ -8487,10 +8937,11 @@
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.7",
|
||||
"picocolors": "^1.0.0",
|
||||
"source-map-js": "^1.2.0"
|
||||
"nanoid": "^3.3.8",
|
||||
"picocolors": "^1.1.1",
|
||||
"source-map-js": "^1.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || >=14"
|
||||
@@ -8641,7 +9092,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/prettier-plugin-tailwindcss": {
|
||||
"version": "0.5.10",
|
||||
"version": "0.6.11",
|
||||
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.11.tgz",
|
||||
"integrity": "sha512-YxaYSIvZPAqhrrEpRtonnrXdghZg1irNg4qrjboCXrpybLWVs55cW2N3juhspVJiO0JBvYJT8SYsJpc8OQSnsA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
@@ -8652,14 +9105,17 @@
|
||||
"@prettier/plugin-pug": "*",
|
||||
"@shopify/prettier-plugin-liquid": "*",
|
||||
"@trivago/prettier-plugin-sort-imports": "*",
|
||||
"@zackad/prettier-plugin-twig": "*",
|
||||
"prettier": "^3.0",
|
||||
"prettier-plugin-astro": "*",
|
||||
"prettier-plugin-css-order": "*",
|
||||
"prettier-plugin-import-sort": "*",
|
||||
"prettier-plugin-jsdoc": "*",
|
||||
"prettier-plugin-marko": "*",
|
||||
"prettier-plugin-multiline-arrays": "*",
|
||||
"prettier-plugin-organize-attributes": "*",
|
||||
"prettier-plugin-organize-imports": "*",
|
||||
"prettier-plugin-sort-imports": "*",
|
||||
"prettier-plugin-style-order": "*",
|
||||
"prettier-plugin-svelte": "*"
|
||||
},
|
||||
@@ -8676,6 +9132,9 @@
|
||||
"@trivago/prettier-plugin-sort-imports": {
|
||||
"optional": true
|
||||
},
|
||||
"@zackad/prettier-plugin-twig": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-astro": {
|
||||
"optional": true
|
||||
},
|
||||
@@ -8691,20 +9150,23 @@
|
||||
"prettier-plugin-marko": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-multiline-arrays": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-organize-attributes": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-organize-imports": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-sort-imports": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-style-order": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-svelte": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-twig-melody": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -10130,9 +10592,10 @@
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-js": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
|
||||
"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
|
||||
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
|
||||
"license": "BSD-3-Clause",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
@@ -10624,6 +11087,15 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/tapable": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
|
||||
"integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/terminal-link": {
|
||||
"version": "2.1.1",
|
||||
"dev": true,
|
||||
@@ -11020,6 +11492,7 @@
|
||||
},
|
||||
"node_modules/update-browserslist-db": {
|
||||
"version": "1.0.13",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
@@ -11763,8 +12236,8 @@
|
||||
"@heroicons/react": "^1.0.6",
|
||||
"@popperjs/core": "^2.6.0",
|
||||
"@tailwindcss/forms": "^0.5.2",
|
||||
"@tailwindcss/postcss": "^4.1.3",
|
||||
"@tailwindcss/typography": "^0.5.2",
|
||||
"autoprefixer": "^10.4.7",
|
||||
"framer-motion": "^6.0.0",
|
||||
"next": "^14.0.4",
|
||||
"postcss": "^8.4.14",
|
||||
@@ -11772,12 +12245,18 @@
|
||||
"react-dom": "^18.2.0",
|
||||
"react-flatpickr": "^3.10.9",
|
||||
"react-hot-toast": "2.3.0",
|
||||
"tailwindcss": "^3.3.3"
|
||||
"tailwindcss": "^4.1.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@floating-ui/react": "^0.24.8"
|
||||
}
|
||||
},
|
||||
"playgrounds/react/node_modules/tailwindcss": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.3.tgz",
|
||||
"integrity": "sha512-2Q+rw9vy1WFXu5cIxlvsabCwhU2qUwodGq03ODhLJ0jW4ek5BUtoCsnLB0qG+m8AHgEsSJcJGDSDe06FXlP74g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"playgrounds/vue": {
|
||||
"name": "playground-vue",
|
||||
"version": "0.0.0",
|
||||
@@ -11785,10 +12264,10 @@
|
||||
"@headlessui/vue": "*",
|
||||
"@heroicons/vue": "^1.0.6",
|
||||
"@tailwindcss/forms": "^0.5.2",
|
||||
"@tailwindcss/postcss": "^4.1.3",
|
||||
"@tailwindcss/typography": "^0.5.2",
|
||||
"autoprefixer": "^10.4.7",
|
||||
"postcss": "^8.4.14",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"tailwindcss": "^4.1.3",
|
||||
"vue": "^3.4.27",
|
||||
"vue-flatpickr-component": "^9.0.5",
|
||||
"vue-router": "^4.3.2"
|
||||
@@ -11912,6 +12391,12 @@
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"playgrounds/vue/node_modules/tailwindcss": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.3.tgz",
|
||||
"integrity": "sha512-2Q+rw9vy1WFXu5cIxlvsabCwhU2qUwodGq03ODhLJ0jW4ek5BUtoCsnLB0qG+m8AHgEsSJcJGDSDe06FXlP74g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"playgrounds/vue/node_modules/vite": {
|
||||
"version": "5.2.12",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-5.2.12.tgz",
|
||||
|
||||
+19
-1
@@ -43,6 +43,24 @@
|
||||
"plugins": [
|
||||
"prettier-plugin-organize-imports",
|
||||
"prettier-plugin-tailwindcss"
|
||||
],
|
||||
"overrides": [
|
||||
{
|
||||
"files": [
|
||||
"./playgrounds/react/**/*"
|
||||
],
|
||||
"options": {
|
||||
"tailwindStylesheet": "./playgrounds/react/pages/styles.css"
|
||||
}
|
||||
},
|
||||
{
|
||||
"files": [
|
||||
"./playgrounds/vue/**/*"
|
||||
],
|
||||
"options": {
|
||||
"tailwindStylesheet": "./playgrounds/vue/src/styles.css"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -60,7 +78,7 @@
|
||||
"npm-run-all": "^4.1.5",
|
||||
"prettier": "^3.1.0",
|
||||
"prettier-plugin-organize-imports": "^3.2.4",
|
||||
"prettier-plugin-tailwindcss": "^0.5.7",
|
||||
"prettier-plugin-tailwindcss": "^0.6.11",
|
||||
"resize-observer-polyfill": "^1.5.1",
|
||||
"rimraf": "^3.0.2",
|
||||
"tslib": "^2.3.1",
|
||||
|
||||
@@ -12,7 +12,7 @@ export let Button = forwardRef<
|
||||
ref={ref}
|
||||
type="button"
|
||||
className={classNames(
|
||||
'ui-focus-visible:ring-2 ui-focus-visible:ring-offset-2 flex items-center rounded-md border border-gray-300 bg-white px-2 py-1 ring-gray-500 ring-offset-gray-100 focus:outline-none',
|
||||
'focus:outline-hidden ui-focus-visible:ring-2 ui-focus-visible:ring-offset-2 flex items-center rounded-md border border-gray-300 bg-white px-2 py-1 ring-gray-500 ring-offset-gray-100',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -20,8 +20,8 @@
|
||||
"@heroicons/react": "^1.0.6",
|
||||
"@popperjs/core": "^2.6.0",
|
||||
"@tailwindcss/forms": "^0.5.2",
|
||||
"@tailwindcss/postcss": "^4.1.3",
|
||||
"@tailwindcss/typography": "^0.5.2",
|
||||
"autoprefixer": "^10.4.7",
|
||||
"framer-motion": "^6.0.0",
|
||||
"next": "^14.0.4",
|
||||
"postcss": "^8.4.14",
|
||||
@@ -29,7 +29,7 @@
|
||||
"react-dom": "^18.2.0",
|
||||
"react-flatpickr": "^3.10.9",
|
||||
"react-hot-toast": "2.3.0",
|
||||
"tailwindcss": "^3.3.3"
|
||||
"tailwindcss": "^4.1.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@floating-ui/react": "^0.24.8"
|
||||
|
||||
@@ -2,7 +2,7 @@ import Link from 'next/link'
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
import { useRouter } from 'next/router'
|
||||
import 'tailwindcss/tailwind.css'
|
||||
import './styles.css'
|
||||
|
||||
function disposables() {
|
||||
let disposables: Function[] = []
|
||||
@@ -122,7 +122,7 @@ function KeyCaster() {
|
||||
if (keys.length <= 0) return null
|
||||
|
||||
return (
|
||||
<div className="pointer-events-none fixed bottom-4 right-4 z-50 cursor-default select-none overflow-hidden rounded-md bg-blue-800 px-4 py-2 text-2xl tracking-wide text-blue-100 shadow">
|
||||
<div className="pointer-events-none fixed bottom-4 right-4 z-50 cursor-default select-none overflow-hidden rounded-md bg-blue-800 px-4 py-2 text-2xl tracking-wide text-blue-100 shadow-sm">
|
||||
{keys.slice().reverse().join(' ')}
|
||||
</div>
|
||||
)
|
||||
@@ -137,7 +137,7 @@ function MyApp({ Component, pageProps }) {
|
||||
return (
|
||||
<>
|
||||
<div className="flex h-screen flex-col overflow-hidden bg-gray-700 font-sans text-gray-900 antialiased">
|
||||
<header className="relative z-10 flex flex-shrink-0 items-center justify-between border-b border-gray-200 bg-gray-700 px-4 py-4 sm:px-6 lg:px-8">
|
||||
<header className="relative z-10 flex shrink-0 items-center justify-between border-b border-gray-200 bg-gray-700 px-4 py-4 sm:px-6 lg:px-8">
|
||||
<Link href="/">
|
||||
<Logo className="h-6" />
|
||||
</Link>
|
||||
|
||||
@@ -46,7 +46,7 @@ export default function App() {
|
||||
name="notifications"
|
||||
className={({ checked }) =>
|
||||
classNames(
|
||||
'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
|
||||
'focus:outline-hidden relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
|
||||
checked ? 'bg-blue-600' : 'bg-gray-200'
|
||||
)
|
||||
}
|
||||
@@ -72,7 +72,7 @@ export default function App() {
|
||||
value="apple"
|
||||
className={({ checked }) =>
|
||||
classNames(
|
||||
'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
|
||||
'focus:outline-hidden relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
|
||||
checked ? 'bg-blue-600' : 'bg-gray-200'
|
||||
)
|
||||
}
|
||||
@@ -95,7 +95,7 @@ export default function App() {
|
||||
value="banana"
|
||||
className={({ checked }) =>
|
||||
classNames(
|
||||
'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
|
||||
'focus:outline-hidden relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
|
||||
checked ? 'bg-blue-600' : 'bg-gray-200'
|
||||
)
|
||||
}
|
||||
@@ -122,7 +122,7 @@ export default function App() {
|
||||
value={size}
|
||||
className={({ active }) =>
|
||||
classNames(
|
||||
'relative flex w-20 border px-2 py-4 first:rounded-l-md last:rounded-r-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
|
||||
'focus:outline-hidden relative flex w-20 border px-2 py-4 first:rounded-l-md last:rounded-r-md focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
|
||||
active ? 'z-10 border-blue-200 bg-blue-50' : 'border-gray-200'
|
||||
)
|
||||
}
|
||||
@@ -191,14 +191,14 @@ export default function App() {
|
||||
</Listbox.Button>
|
||||
|
||||
<div className="absolute z-10 mt-1 w-full rounded-md bg-white shadow-lg">
|
||||
<Listbox.Options className="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
|
||||
<Listbox.Options className="shadow-2xs focus:outline-hidden max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5">
|
||||
{people.map((person) => (
|
||||
<Listbox.Option
|
||||
key={person.id}
|
||||
value={person}
|
||||
className={({ active }) => {
|
||||
return classNames(
|
||||
'relative cursor-default select-none py-2 pl-3 pr-9 ',
|
||||
'relative cursor-default select-none py-2 pl-3 pr-9',
|
||||
active ? 'bg-blue-600 text-white' : 'text-gray-900'
|
||||
)
|
||||
}}
|
||||
@@ -260,7 +260,7 @@ export default function App() {
|
||||
<div className="flex w-full flex-col">
|
||||
<Combobox.Input
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
className="w-full rounded rounded-md border-gray-300 bg-clip-padding px-3 py-1 shadow-sm focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
className="shadow-xs focus:outline-hidden w-full rounded-md rounded-sm border-gray-300 bg-clip-padding px-3 py-1 focus:border-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
placeholder="Search users..."
|
||||
/>
|
||||
<div
|
||||
@@ -270,7 +270,7 @@ export default function App() {
|
||||
)}
|
||||
>
|
||||
<div className="absolute z-10 mt-1 w-full rounded-md bg-white shadow-lg">
|
||||
<Combobox.Options className="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5">
|
||||
<Combobox.Options className="shadow-2xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5">
|
||||
{locations
|
||||
.filter((location) =>
|
||||
location.toLowerCase().includes(query.toLowerCase())
|
||||
@@ -281,7 +281,7 @@ export default function App() {
|
||||
value={location}
|
||||
className={({ active }) => {
|
||||
return classNames(
|
||||
'relative flex cursor-default select-none space-x-4 py-2 pl-3 pr-9 ',
|
||||
'relative flex cursor-default select-none space-x-4 py-2 pl-3 pr-9',
|
||||
active ? 'bg-blue-600 text-white' : 'text-gray-900'
|
||||
)
|
||||
}}
|
||||
@@ -335,13 +335,13 @@ export default function App() {
|
||||
</div>
|
||||
|
||||
<div className="space-x-4">
|
||||
<button className="rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium leading-6 text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:text-sm sm:leading-5">
|
||||
<button className="shadow-xs focus:outline-hidden rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium leading-6 text-gray-700 hover:text-gray-500 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:text-sm sm:leading-5">
|
||||
Submit
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="reset"
|
||||
className="rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium leading-6 text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:text-sm sm:leading-5"
|
||||
className="shadow-xs focus:outline-hidden rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium leading-6 text-gray-700 hover:text-gray-500 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:text-sm sm:leading-5"
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
|
||||
@@ -48,10 +48,10 @@ export default function Home() {
|
||||
</Combobox.Label>
|
||||
|
||||
<div className="relative">
|
||||
<span className="relative inline-flex flex-row overflow-hidden rounded-md border shadow-sm">
|
||||
<span className="shadow-xs relative inline-flex flex-row overflow-hidden rounded-md border">
|
||||
<Combobox.Input
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
className="border-none px-3 py-1 outline-none"
|
||||
className="outline-hidden border-none px-3 py-1"
|
||||
/>
|
||||
<Combobox.Button as={Button}>
|
||||
<span className="pointer-events-none flex items-center px-2">
|
||||
@@ -75,7 +75,7 @@ export default function Home() {
|
||||
<Combobox.Options
|
||||
transition
|
||||
anchor="bottom start"
|
||||
className="w-[calc(var(--input-width)+var(--button-width))] overflow-auto rounded-md bg-white py-1 text-base leading-6 shadow-lg transition duration-1000 [--anchor-gap:theme(spacing.1)] [--anchor-max-height:theme(spacing.60)] focus:outline-none data-[closed]:opacity-0 sm:text-sm sm:leading-5"
|
||||
className="focus:outline-hidden data-closed:opacity-0 w-[calc(var(--input-width)+var(--button-width))] overflow-auto rounded-md bg-white py-1 text-base leading-6 shadow-lg transition duration-1000 [--anchor-gap:--spacing(1)] [--anchor-max-height:--spacing(60)] sm:text-sm sm:leading-5"
|
||||
>
|
||||
{countries.map((country) => (
|
||||
<Combobox.Option
|
||||
@@ -83,7 +83,7 @@ export default function Home() {
|
||||
value={country}
|
||||
className={({ active }) => {
|
||||
return classNames(
|
||||
'relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
|
||||
'focus:outline-hidden relative cursor-default select-none py-2 pl-3 pr-9',
|
||||
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
|
||||
)
|
||||
}}
|
||||
|
||||
@@ -62,10 +62,10 @@ export default function Home() {
|
||||
</Combobox.Label>
|
||||
|
||||
<div className="relative">
|
||||
<span className="relative inline-flex flex-row overflow-hidden rounded-md border shadow-sm">
|
||||
<span className="shadow-xs relative inline-flex flex-row overflow-hidden rounded-md border">
|
||||
<Combobox.Input
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
className="border-none px-3 py-1 outline-none"
|
||||
className="outline-hidden border-none px-3 py-1"
|
||||
/>
|
||||
<Combobox.Button as={Button}>
|
||||
<span className="pointer-events-none flex items-center px-2">
|
||||
@@ -87,14 +87,14 @@ export default function Home() {
|
||||
</span>
|
||||
|
||||
<div className="absolute mt-1 w-full rounded-md bg-white shadow-lg">
|
||||
<Combobox.Options className="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
|
||||
<Combobox.Options className="shadow-2xs focus:outline-hidden max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5">
|
||||
{people.map((name) => (
|
||||
<Combobox.Option
|
||||
key={name}
|
||||
value={name}
|
||||
className={({ active }) => {
|
||||
return classNames(
|
||||
'relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
|
||||
'focus:outline-hidden relative cursor-default select-none py-2 pl-3 pr-9',
|
||||
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
|
||||
)
|
||||
}}
|
||||
|
||||
@@ -83,11 +83,11 @@ export default function Home() {
|
||||
</Combobox.Label>
|
||||
|
||||
<div className="relative">
|
||||
<span className="relative inline-flex flex-row overflow-hidden rounded-md border shadow-sm">
|
||||
<span className="shadow-xs relative inline-flex flex-row overflow-hidden rounded-md border">
|
||||
<Combobox.Input
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
displayValue={(option: Option | null) => option?.name ?? ''}
|
||||
className="border-none px-3 py-1 outline-none"
|
||||
className="outline-hidden border-none px-3 py-1"
|
||||
/>
|
||||
<Combobox.Button as={Button}>
|
||||
<span className="pointer-events-none flex items-center px-2">
|
||||
@@ -116,7 +116,7 @@ export default function Home() {
|
||||
static={filtered.length === 0}
|
||||
ref={optionsRef}
|
||||
className={classNames(
|
||||
'shadow-xs max-h-60 rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5',
|
||||
'shadow-2xs focus:outline-hidden max-h-60 rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5',
|
||||
filtered.length === 0 ? 'overflow-hidden' : 'overflow-auto'
|
||||
)}
|
||||
>
|
||||
@@ -130,7 +130,7 @@ export default function Home() {
|
||||
disabled
|
||||
// Note: Do NOT use `null` for the `value`
|
||||
value={option ?? emptyOption.current}
|
||||
className="relative w-full cursor-default select-none px-3 py-2 text-center focus:outline-none"
|
||||
className="focus:outline-hidden relative w-full cursor-default select-none px-3 py-2 text-center"
|
||||
>
|
||||
<div className="relative grid h-full grid-cols-1 grid-rows-1">
|
||||
<div className="absolute inset-0">
|
||||
@@ -155,7 +155,7 @@ export default function Home() {
|
||||
<button
|
||||
id="add_person"
|
||||
type="button"
|
||||
className="rounded bg-blue-500 px-4 py-2 font-semibold text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
className="focus:outline-hidden rounded-sm bg-blue-500 px-4 py-2 font-semibold text-white hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
onClick={() => {
|
||||
let person = { name: query, disabled: false }
|
||||
setList((list) => [...list, person])
|
||||
@@ -177,7 +177,7 @@ export default function Home() {
|
||||
value={option}
|
||||
className={({ active }) => {
|
||||
return classNames(
|
||||
'relative w-full cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
|
||||
'focus:outline-hidden relative w-full cursor-default select-none py-2 pl-3 pr-9',
|
||||
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
|
||||
)
|
||||
}}
|
||||
|
||||
@@ -80,10 +80,10 @@ function Example({ virtual = true, data, initial }: { virtual?: boolean; data; i
|
||||
</Combobox.Label>
|
||||
|
||||
<div className="relative">
|
||||
<span className="relative inline-flex flex-row overflow-hidden rounded-md border shadow-sm">
|
||||
<span className="shadow-xs relative inline-flex flex-row overflow-hidden rounded-md border">
|
||||
<Combobox.Input
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
className="border-none px-3 py-1 outline-none"
|
||||
className="outline-hidden border-none px-3 py-1"
|
||||
/>
|
||||
<Combobox.Button as={Button}>
|
||||
<span className="pointer-events-none flex items-center px-2">
|
||||
@@ -108,7 +108,7 @@ function Example({ virtual = true, data, initial }: { virtual?: boolean; data; i
|
||||
<Combobox.Options
|
||||
transition
|
||||
anchor="bottom start"
|
||||
className="w-[calc(var(--input-width)+var(--button-width))] overflow-auto rounded-md bg-white py-1 text-base leading-6 shadow-lg transition duration-300 [--anchor-gap:theme(spacing.1)] [--anchor-max-height:theme(spacing.60)] focus:outline-none data-[closed]:opacity-0 sm:text-sm sm:leading-5"
|
||||
className="focus:outline-hidden data-closed:opacity-0 w-[calc(var(--input-width)+var(--button-width))] overflow-auto rounded-md bg-white py-1 text-base leading-6 shadow-lg transition duration-300 [--anchor-gap:--spacing(1)] [--anchor-max-height:--spacing(60)] sm:text-sm sm:leading-5"
|
||||
>
|
||||
{({ option }) => {
|
||||
return (
|
||||
@@ -116,7 +116,7 @@ function Example({ virtual = true, data, initial }: { virtual?: boolean; data; i
|
||||
value={option}
|
||||
className={({ active }) => {
|
||||
return classNames(
|
||||
'relative w-full cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
|
||||
'focus:outline-hidden relative w-full cursor-default select-none py-2 pl-3 pr-9',
|
||||
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
|
||||
)
|
||||
}}
|
||||
@@ -157,7 +157,7 @@ function Example({ virtual = true, data, initial }: { virtual?: boolean; data; i
|
||||
<Combobox.Options
|
||||
transition
|
||||
anchor="bottom start"
|
||||
className="w-[calc(var(--input-width)+var(--button-width))] overflow-auto rounded-md bg-white py-1 text-base leading-6 shadow-lg transition duration-300 [--anchor-gap:theme(spacing.1)] [--anchor-max-height:theme(spacing.60)] focus:outline-none data-[closed]:opacity-0 sm:text-sm sm:leading-5"
|
||||
className="focus:outline-hidden data-closed:opacity-0 w-[calc(var(--input-width)+var(--button-width))] overflow-auto rounded-md bg-white py-1 text-base leading-6 shadow-lg transition duration-300 [--anchor-gap:--spacing(1)] [--anchor-max-height:--spacing(60)] sm:text-sm sm:leading-5"
|
||||
>
|
||||
{timezones.map((timezone, idx) => {
|
||||
return (
|
||||
@@ -167,7 +167,7 @@ function Example({ virtual = true, data, initial }: { virtual?: boolean; data; i
|
||||
value={timezone}
|
||||
className={({ active }) => {
|
||||
return classNames(
|
||||
'relative w-full cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
|
||||
'focus:outline-hidden relative w-full cursor-default select-none py-2 pl-3 pr-9',
|
||||
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
|
||||
)
|
||||
}}
|
||||
|
||||
@@ -60,10 +60,10 @@ export default function Home() {
|
||||
</Combobox.Label>
|
||||
|
||||
<div className="relative">
|
||||
<span className="relative inline-flex flex-row overflow-hidden rounded-md border shadow-sm">
|
||||
<span className="shadow-xs relative inline-flex flex-row overflow-hidden rounded-md border">
|
||||
<Combobox.Input
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
className="border-none px-3 py-1 outline-none"
|
||||
className="outline-hidden border-none px-3 py-1"
|
||||
/>
|
||||
<Combobox.Button as={Button}>
|
||||
<span className="pointer-events-none flex items-center px-2">
|
||||
@@ -85,14 +85,14 @@ export default function Home() {
|
||||
</span>
|
||||
|
||||
<div className="absolute mt-1 w-full rounded-md bg-white shadow-lg">
|
||||
<Combobox.Options className="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
|
||||
<Combobox.Options className="shadow-2xs focus:outline-hidden max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5">
|
||||
{people.map((name) => (
|
||||
<Combobox.Option
|
||||
key={name}
|
||||
value={name}
|
||||
className={({ active }) => {
|
||||
return classNames(
|
||||
'relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
|
||||
'focus:outline-hidden relative cursor-default select-none py-2 pl-3 pr-9',
|
||||
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
|
||||
)
|
||||
}}
|
||||
|
||||
@@ -53,19 +53,19 @@ export default function Home() {
|
||||
as="div"
|
||||
value={activePerson}
|
||||
onChange={(person) => setPerson(person)}
|
||||
className="w-full overflow-hidden rounded border border-black/5 bg-white bg-clip-padding shadow-sm"
|
||||
className="shadow-xs w-full overflow-hidden rounded-sm border border-black/5 bg-white bg-clip-padding"
|
||||
>
|
||||
{({ activeOption }) => {
|
||||
return (
|
||||
<div className="flex w-full flex-col">
|
||||
<Combobox.Input
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
className="w-full rounded-none border-none bg-none px-3 py-1 outline-none"
|
||||
className="outline-hidden w-full rounded-none border-none bg-none px-3 py-1"
|
||||
placeholder="Search users…"
|
||||
displayValue={(item: typeof activeOption) => item?.name}
|
||||
/>
|
||||
<div className="flex">
|
||||
<Combobox.Options className="shadow-xs max-h-60 flex-1 overflow-auto text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
|
||||
<Combobox.Options className="shadow-2xs focus:outline-hidden max-h-60 flex-1 overflow-auto text-base leading-6 sm:text-sm sm:leading-5">
|
||||
{Array.from(groups.entries())
|
||||
.sort(([letterA], [letterZ]) => letterA.localeCompare(letterZ))
|
||||
.map(([letter, people]) => (
|
||||
@@ -77,7 +77,7 @@ export default function Home() {
|
||||
value={person}
|
||||
className={({ active }) => {
|
||||
return classNames(
|
||||
'relative flex cursor-default select-none space-x-4 py-2 pl-3 pr-9 focus:outline-none',
|
||||
'focus:outline-hidden relative flex cursor-default select-none space-x-4 py-2 pl-3 pr-9',
|
||||
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
|
||||
)
|
||||
}}
|
||||
|
||||
@@ -40,14 +40,14 @@ export default function Home() {
|
||||
as="div"
|
||||
value={activePerson}
|
||||
onChange={(person) => setActivePerson(person)}
|
||||
className="w-full overflow-hidden rounded border border-black/5 bg-white bg-clip-padding shadow-sm"
|
||||
className="shadow-xs w-full overflow-hidden rounded-sm border border-black/5 bg-white bg-clip-padding"
|
||||
>
|
||||
{({ activeOption, open }) => {
|
||||
return (
|
||||
<div className="flex w-full flex-col">
|
||||
<Combobox.Input
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
className="w-full rounded-none border-none px-3 py-1 outline-none"
|
||||
className="outline-hidden w-full rounded-none border-none px-3 py-1"
|
||||
placeholder="Search users…"
|
||||
displayValue={(item: typeof activePerson) => item?.name}
|
||||
/>
|
||||
@@ -57,14 +57,14 @@ export default function Home() {
|
||||
activePerson && !open ? 'border-transparent' : 'border-gray-200'
|
||||
)}
|
||||
>
|
||||
<Combobox.Options className="shadow-xs max-h-60 flex-1 overflow-auto py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
|
||||
<Combobox.Options className="shadow-2xs focus:outline-hidden max-h-60 flex-1 overflow-auto py-1 text-base leading-6 sm:text-sm sm:leading-5">
|
||||
{people.map((person) => (
|
||||
<Combobox.Option
|
||||
key={person.id}
|
||||
value={person}
|
||||
className={({ active }) => {
|
||||
return classNames(
|
||||
'relative flex cursor-default select-none space-x-4 py-2 pl-3 pr-9 focus:outline-none',
|
||||
'focus:outline-hidden relative flex cursor-default select-none space-x-4 py-2 pl-3 pr-9',
|
||||
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
|
||||
)
|
||||
}}
|
||||
|
||||
@@ -50,13 +50,13 @@ function MultiPeopleList() {
|
||||
</Combobox.Label>
|
||||
|
||||
<div className="relative">
|
||||
<span className="inline-block w-full rounded-md shadow-sm">
|
||||
<div className="relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-2 pr-10 text-left transition duration-150 ease-in-out focus-within:border-blue-700 focus-within:outline-none focus-within:ring-1 focus-within:ring-blue-700 sm:text-sm sm:leading-5">
|
||||
<span className="shadow-xs inline-block w-full rounded-md">
|
||||
<div className="focus-within:outline-hidden relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-2 pr-10 text-left transition duration-150 ease-in-out focus-within:border-blue-700 focus-within:ring-1 focus-within:ring-blue-700 sm:text-sm sm:leading-5">
|
||||
<span className="block flex flex-wrap gap-2">
|
||||
{activePersons.map((person) => (
|
||||
<span
|
||||
key={person.id}
|
||||
className="flex items-center gap-1 rounded bg-blue-50 px-2 py-0.5"
|
||||
className="flex items-center gap-1 rounded-sm bg-blue-50 px-2 py-0.5"
|
||||
>
|
||||
<span>{person.name}</span>
|
||||
<svg
|
||||
@@ -106,7 +106,7 @@ function MultiPeopleList() {
|
||||
</span>
|
||||
|
||||
<div className="absolute mt-1 w-full rounded-md bg-white shadow-lg">
|
||||
<Combobox.Options className="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
|
||||
<Combobox.Options className="shadow-2xs focus:outline-hidden max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5">
|
||||
{people
|
||||
.filter((person) => person.name.toLowerCase().includes(query.toLowerCase()))
|
||||
.map((person) => (
|
||||
@@ -115,7 +115,7 @@ function MultiPeopleList() {
|
||||
value={person}
|
||||
className={({ active }) => {
|
||||
return classNames(
|
||||
'relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
|
||||
'focus:outline-hidden relative cursor-default select-none py-2 pl-3 pr-9',
|
||||
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
|
||||
)
|
||||
}}
|
||||
@@ -154,7 +154,7 @@ function MultiPeopleList() {
|
||||
</div>
|
||||
</div>
|
||||
</Combobox>
|
||||
<button className="mt-2 inline-flex items-center rounded border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
|
||||
<button className="shadow-xs focus:outline-hidden mt-2 inline-flex items-center rounded-sm border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
|
||||
Submit
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@@ -35,16 +35,16 @@ export default function Home() {
|
||||
<Dialog
|
||||
open={isOpen}
|
||||
onClose={() => setIsOpen(false)}
|
||||
className="relative z-50 duration-500 data-[closed]:opacity-0"
|
||||
className="data-closed:opacity-0 relative z-50 duration-500"
|
||||
>
|
||||
<DialogBackdrop
|
||||
transition={transitionBackdrop}
|
||||
className="fixed inset-0 bg-black/30 duration-500 ease-out data-[closed]:opacity-0"
|
||||
className="data-closed:opacity-0 fixed inset-0 bg-black/30 duration-500 ease-out"
|
||||
/>
|
||||
<div className="fixed inset-0 flex w-screen items-center justify-center p-4">
|
||||
<DialogPanel
|
||||
transition={transitionPanel}
|
||||
className="w-full max-w-lg space-y-4 bg-white p-12 duration-500 ease-out data-[closed]:scale-95 data-[closed]:opacity-0"
|
||||
className="data-closed:scale-95 data-closed:opacity-0 w-full max-w-lg space-y-4 bg-white p-12 duration-500 ease-out"
|
||||
>
|
||||
<h1 className="text-2xl font-bold">Dialog</h1>
|
||||
<p>
|
||||
|
||||
@@ -5,10 +5,10 @@ import { Button } from '../../components/button'
|
||||
function Modal(props) {
|
||||
return (
|
||||
<Dialog className="relative z-50" {...props}>
|
||||
<div className="fixed inset-0 bg-green-500 bg-opacity-90 backdrop-blur backdrop-filter" />
|
||||
<div className="fixed inset-0 bg-green-500 bg-opacity-90 backdrop-blur-sm backdrop-filter" />
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4">
|
||||
<Dialog.Panel className="relative m-5 flex w-full max-w-3xl gap-4 rounded-lg bg-white p-10 shadow">
|
||||
<Dialog.Panel className="relative m-5 flex w-full max-w-3xl gap-4 rounded-lg bg-white p-10 shadow-sm">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
</Dialog.Panel>
|
||||
|
||||
@@ -15,7 +15,7 @@ function MyDialog({ open, close }) {
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed bottom-0 left-0 top-0 flex items-center justify-center bg-red-500 p-4">
|
||||
<Dialog.Panel className="mx-auto w-48 rounded bg-white p-4">
|
||||
<Dialog.Panel className="mx-auto w-48 rounded-sm bg-white p-4">
|
||||
<p className="my-2">Gray area should be scrollable</p>
|
||||
|
||||
<p className="h-32 overflow-y-scroll border bg-gray-100">
|
||||
|
||||
@@ -13,7 +13,7 @@ if (typeof document !== 'undefined') {
|
||||
|
||||
connectedCallback() {
|
||||
let button = document.createElement('button')
|
||||
button.textContent = 'Inside shadow root (closed)'
|
||||
button.textContent = 'Inside shadow-sm root (closed)'
|
||||
this.shadow.appendChild(button)
|
||||
}
|
||||
}
|
||||
@@ -33,7 +33,7 @@ function ShadowChildren({ id }: { id: string }) {
|
||||
let button = document.createElement('button')
|
||||
button.id = id
|
||||
button.style.display = 'block'
|
||||
button.textContent = 'Inside shadow root (open)'
|
||||
button.textContent = 'Inside shadow-sm root (open)'
|
||||
|
||||
let mce = document.createElement('my-custom-element')
|
||||
|
||||
@@ -54,7 +54,7 @@ export default function App() {
|
||||
<div className="fixed inset-0 z-50 bg-gray-900/75 backdrop-blur-lg">
|
||||
<div>
|
||||
<button
|
||||
className="m-4 rounded border-0 bg-gray-500 px-3 py-1 font-medium text-white hover:bg-gray-600"
|
||||
className="m-4 rounded-sm border-0 bg-gray-500 px-3 py-1 font-medium text-white hover:bg-gray-600"
|
||||
id="btn_outside_light"
|
||||
>
|
||||
Outside shadow root
|
||||
@@ -65,7 +65,7 @@ export default function App() {
|
||||
<Dialog.Panel className="fixed left-16 top-16 z-50 h-64 w-64 rounded-lg border border-black/10 bg-white bg-clip-padding p-12 shadow-lg">
|
||||
<div>
|
||||
<button
|
||||
className="m-4 rounded border-0 bg-gray-500 px-3 py-1 font-medium text-white hover:bg-gray-600"
|
||||
className="m-4 rounded-sm border-0 bg-gray-500 px-3 py-1 font-medium text-white hover:bg-gray-600"
|
||||
id="btn_inside_light"
|
||||
>
|
||||
Outside shadow root
|
||||
|
||||
@@ -116,7 +116,7 @@ export default function Home() {
|
||||
<Dialog.Panel className="inline-block transform overflow-hidden rounded-lg bg-white text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:align-middle">
|
||||
<div className="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
|
||||
<div className="sm:flex sm:items-start">
|
||||
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
{/* Heroicon name: exclamation */}
|
||||
<svg
|
||||
className="h-6 w-6 text-red-600"
|
||||
@@ -174,7 +174,7 @@ export default function Home() {
|
||||
<Portal>
|
||||
<Menu.Items
|
||||
ref={container}
|
||||
className="z-20 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg outline-none"
|
||||
className="outline-hidden z-20 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg"
|
||||
>
|
||||
<div className="px-4 py-3">
|
||||
<p className="text-sm leading-5">Signed in as</p>
|
||||
|
||||
@@ -12,7 +12,7 @@ export default function Example() {
|
||||
<div className="p-12">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center rounded-md border border-gray-300 bg-white px-6 py-3 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
className="shadow-xs focus:outline-hidden inline-flex items-center rounded-md border border-gray-300 bg-white px-6 py-3 text-base font-medium text-gray-700 hover:bg-gray-50 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
onClick={() => setOpen(true)}
|
||||
>
|
||||
Open Dialog
|
||||
@@ -43,7 +43,7 @@ export default function Example() {
|
||||
>
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
|
||||
<div className="sm:flex sm:items-start">
|
||||
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<ExclamationIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
|
||||
@@ -71,14 +71,14 @@ export default function Example() {
|
||||
<div className="mt-5 sm:ml-10 sm:mt-4 sm:flex sm:pl-4">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:w-auto sm:text-sm"
|
||||
className="shadow-xs focus:outline-hidden inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium text-white hover:bg-red-700 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:w-auto sm:text-sm"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
Deactivate
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:mt-0 sm:w-auto sm:text-sm"
|
||||
className="shadow-xs focus:outline-hidden mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 hover:bg-gray-50 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:mt-0 sm:w-auto sm:text-sm"
|
||||
onClick={() => setOpen(false)}
|
||||
ref={cancelButtonRef}
|
||||
>
|
||||
|
||||
@@ -19,7 +19,7 @@ export default function Home() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsOpen((v) => !v)}
|
||||
className="focus:shadow-outline-blue m-12 rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium leading-6 text-gray-700 shadow-sm transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 focus:outline-none sm:text-sm sm:leading-5"
|
||||
className="focus:shadow-outline-blue shadow-xs focus:outline-hidden m-12 rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium leading-6 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 sm:text-sm sm:leading-5"
|
||||
>
|
||||
Toggle!
|
||||
</button>
|
||||
@@ -89,7 +89,7 @@ export default function Home() {
|
||||
<Dialog.Panel className="inline-block transform overflow-hidden rounded-lg bg-white text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:align-middle">
|
||||
<div className="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
|
||||
<div className="sm:flex sm:items-start">
|
||||
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
{/* Heroicon name: exclamation */}
|
||||
<svg
|
||||
className="h-6 w-6 text-red-600"
|
||||
@@ -128,14 +128,14 @@ export default function Home() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="focus:shadow-outline-red inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm"
|
||||
className="focus:shadow-outline-red shadow-xs focus:outline-hidden inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium text-white hover:bg-red-700 sm:ml-3 sm:w-auto sm:text-sm"
|
||||
>
|
||||
Deactivate
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="focus:shadow-outline-indigo mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none sm:mt-0 sm:w-auto sm:text-sm"
|
||||
className="focus:shadow-outline-indigo shadow-xs focus:outline-hidden mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 hover:text-gray-500 sm:mt-0 sm:w-auto sm:text-sm"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
@@ -30,23 +30,23 @@ export default function App() {
|
||||
</MenuButton>
|
||||
<MenuItems
|
||||
anchor="bottom start"
|
||||
className="z-50 flex w-[calc(var(--button-width)*2)] flex-col rounded bg-white p-1 shadow outline-none"
|
||||
className="outline-hidden z-50 flex w-[calc(var(--button-width)*2)] flex-col rounded-sm bg-white p-1 shadow-sm"
|
||||
>
|
||||
<MenuItem
|
||||
as="button"
|
||||
className="rounded px-2 py-1 text-left data-[active]:bg-gray-100"
|
||||
className="data-active:bg-gray-100 rounded-sm px-2 py-1 text-left"
|
||||
>
|
||||
Item A
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
as="button"
|
||||
className="rounded px-2 py-1 text-left data-[active]:bg-gray-100"
|
||||
className="data-active:bg-gray-100 rounded-sm px-2 py-1 text-left"
|
||||
>
|
||||
Item B
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
as="button"
|
||||
className="rounded px-2 py-1 text-left data-[active]:bg-gray-100"
|
||||
className="data-active:bg-gray-100 rounded-sm px-2 py-1 text-left"
|
||||
onClick={() => setOpenDelete(true)}
|
||||
>
|
||||
Delete
|
||||
@@ -125,7 +125,7 @@ function MyDialog({ level = 0, open, onClose, children }: any) {
|
||||
style={{
|
||||
transform: `translate(calc(50px * ${level}), calc(50px * ${level}))`,
|
||||
}}
|
||||
className="relative z-10 flex w-96 -translate-y-24 flex-col rounded bg-white p-4 shadow-xl"
|
||||
className="relative z-10 flex w-96 -translate-y-24 flex-col rounded-sm bg-white p-4 shadow-xl"
|
||||
>
|
||||
{children}
|
||||
</DialogPanel>
|
||||
|
||||
@@ -30,7 +30,7 @@ export default function Home() {
|
||||
<Label className="block text-sm font-medium leading-5 text-gray-700">Assigned to</Label>
|
||||
|
||||
<div className="relative">
|
||||
<span className="inline-block w-full rounded-md shadow-sm">
|
||||
<span className="shadow-xs inline-block w-full rounded-md">
|
||||
<ListboxButton className="relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out sm:text-sm sm:leading-5">
|
||||
<span className="block truncate">{active}</span>
|
||||
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
@@ -54,18 +54,18 @@ export default function Home() {
|
||||
<ListboxOptions
|
||||
anchor="bottom"
|
||||
transition
|
||||
className="w-[var(--button-width)] overflow-auto rounded-md border border-gray-300 bg-white py-1 text-base leading-6 shadow-lg transition duration-200 ease-out [--anchor-gap:theme(spacing.1)] [--anchor-max-height:theme(spacing.60)] focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0 sm:text-sm sm:leading-5"
|
||||
className="focus:outline-hidden data-closed:scale-95 data-closed:opacity-0 w-[var(--button-width)] overflow-auto rounded-md border border-gray-300 bg-white py-1 text-base leading-6 shadow-lg transition duration-200 ease-out [--anchor-gap:--spacing(1)] [--anchor-max-height:--spacing(60)] sm:text-sm sm:leading-5"
|
||||
>
|
||||
{people.map((name) => (
|
||||
<ListboxOption
|
||||
key={name}
|
||||
value={name}
|
||||
className="group relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 focus:outline-none data-[active]:bg-indigo-600 data-[active]:text-white"
|
||||
className="focus:outline-hidden data-active:bg-indigo-600 data-active:text-white group relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900"
|
||||
>
|
||||
<span className="block truncate font-normal group-data-[selected]:font-semibold">
|
||||
<span className="group-data-selected:font-semibold block truncate font-normal">
|
||||
{name}
|
||||
</span>
|
||||
<span className="absolute inset-y-0 right-0 hidden items-center pr-4 text-indigo-600 group-data-[selected]:flex group-data-[active]:text-white">
|
||||
<span className="group-data-active:text-white group-data-selected:flex absolute inset-y-0 right-0 hidden items-center pr-4 text-indigo-600">
|
||||
<svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
|
||||
@@ -44,8 +44,8 @@ function MultiPeopleList() {
|
||||
</Listbox.Label>
|
||||
|
||||
<div className="relative">
|
||||
<span className="inline-block w-full rounded-md shadow-sm">
|
||||
<Listbox.Button className="focus:shadow-outline-blue relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-2 pr-10 text-left transition duration-150 ease-in-out focus:border-blue-300 focus:outline-none sm:text-sm sm:leading-5">
|
||||
<span className="shadow-xs inline-block w-full rounded-md">
|
||||
<Listbox.Button className="focus:shadow-outline-blue focus:outline-hidden relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-2 pr-10 text-left transition duration-150 ease-in-out focus:border-blue-300 sm:text-sm sm:leading-5">
|
||||
<span className="block flex flex-wrap gap-2">
|
||||
{activePersons.length === 0 ? (
|
||||
<span className="p-0.5">Empty</span>
|
||||
@@ -53,7 +53,7 @@ function MultiPeopleList() {
|
||||
activePersons.map((person) => (
|
||||
<span
|
||||
key={person.id}
|
||||
className="flex items-center gap-1 rounded bg-blue-50 px-2 py-0.5"
|
||||
className="flex items-center gap-1 rounded-sm bg-blue-50 px-2 py-0.5"
|
||||
>
|
||||
<span>{person.name}</span>
|
||||
<svg
|
||||
@@ -98,14 +98,14 @@ function MultiPeopleList() {
|
||||
</span>
|
||||
|
||||
<div className="absolute mt-1 w-full rounded-md bg-white shadow-lg">
|
||||
<Listbox.Options className="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
|
||||
<Listbox.Options className="shadow-2xs focus:outline-hidden max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5">
|
||||
{people.map((person) => (
|
||||
<Listbox.Option
|
||||
key={person.id}
|
||||
value={person}
|
||||
className={({ active }) => {
|
||||
return classNames(
|
||||
'relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
|
||||
'focus:outline-hidden relative cursor-default select-none py-2 pl-3 pr-9',
|
||||
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
|
||||
)
|
||||
}}
|
||||
@@ -144,7 +144,7 @@ function MultiPeopleList() {
|
||||
</div>
|
||||
</div>
|
||||
</Listbox>
|
||||
<button className="mt-2 inline-flex items-center rounded border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
|
||||
<button className="shadow-xs focus:outline-hidden mt-2 inline-flex items-center rounded-sm border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
|
||||
Submit
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@@ -24,7 +24,7 @@ export default function Home() {
|
||||
<label htmlFor="email" className="block text-sm font-medium leading-5 text-gray-700">
|
||||
Email
|
||||
</label>
|
||||
<div className="relative mt-1 rounded-md shadow-sm">
|
||||
<div className="shadow-xs relative mt-1 rounded-md">
|
||||
<input
|
||||
className="form-input block w-full sm:text-sm sm:leading-5"
|
||||
placeholder="you@example.com"
|
||||
@@ -60,8 +60,8 @@ function PeopleList() {
|
||||
</Listbox.Label>
|
||||
|
||||
<div className="relative">
|
||||
<span className="inline-block w-full rounded-md shadow-sm">
|
||||
<Listbox.Button className="focus:shadow-outline-blue relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out focus:border-blue-300 focus:outline-none sm:text-sm sm:leading-5">
|
||||
<span className="shadow-xs inline-block w-full rounded-md">
|
||||
<Listbox.Button className="focus:shadow-outline-blue focus:outline-hidden relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out focus:border-blue-300 sm:text-sm sm:leading-5">
|
||||
<span className="block truncate">{active}</span>
|
||||
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<svg
|
||||
@@ -82,14 +82,14 @@ function PeopleList() {
|
||||
</span>
|
||||
|
||||
<div className="absolute mt-1 w-full rounded-md bg-white shadow-lg">
|
||||
<Listbox.Options className="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
|
||||
<Listbox.Options className="shadow-2xs focus:outline-hidden max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5">
|
||||
{people.map((name) => (
|
||||
<Listbox.Option
|
||||
key={name}
|
||||
value={name}
|
||||
className={({ active }) => {
|
||||
return classNames(
|
||||
'relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
|
||||
'focus:outline-hidden relative cursor-default select-none py-2 pl-3 pr-9',
|
||||
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
|
||||
)
|
||||
}}
|
||||
|
||||
@@ -25,7 +25,7 @@ export default function Home() {
|
||||
<div className="flex h-full w-screen justify-center bg-gray-50 p-12">
|
||||
<div className="mt-64 inline-block text-left">
|
||||
<Menu>
|
||||
<span className="inline-flex rounded-md shadow-sm">
|
||||
<span className="shadow-xs inline-flex rounded-md">
|
||||
<Menu.Button ref={refs.setReference} as={Button}>
|
||||
<span>Options</span>
|
||||
<svg className="-mr-1 ml-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
@@ -40,7 +40,7 @@ export default function Home() {
|
||||
|
||||
<Portal>
|
||||
<Menu.Items
|
||||
className="w-56 divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg outline-none"
|
||||
className="outline-hidden w-56 divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg"
|
||||
ref={refs.setFloating}
|
||||
style={floatingStyles}
|
||||
>
|
||||
|
||||
@@ -13,7 +13,7 @@ export default function Home() {
|
||||
<Menu>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<span className="rounded-md shadow-sm">
|
||||
<span className="shadow-xs rounded-md">
|
||||
<Menu.Button as={Button}>
|
||||
<span>Options</span>
|
||||
<svg className="-mr-1 ml-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
@@ -34,7 +34,7 @@ export default function Home() {
|
||||
initial={{ opacity: 0, y: 0 }}
|
||||
animate={{ opacity: 1, y: '0.5rem' }}
|
||||
exit={{ opacity: 0, y: 0 }}
|
||||
className="absolute right-0 w-56 divide-y divide-gray-100 rounded-md border border-gray-200 bg-white opacity-0 shadow-lg outline-none"
|
||||
className="outline-hidden absolute right-0 w-56 divide-y divide-gray-100 rounded-md border border-gray-200 bg-white opacity-0 shadow-lg"
|
||||
>
|
||||
<div className="px-4 py-3">
|
||||
<p className="text-sm leading-5">Signed in as</p>
|
||||
|
||||
@@ -25,7 +25,7 @@ export default function Home() {
|
||||
<div className="flex h-full w-screen justify-center bg-gray-50 p-12">
|
||||
<div className="mt-64 inline-block text-left">
|
||||
<Menu>
|
||||
<span className="inline-flex rounded-md shadow-sm">
|
||||
<span className="shadow-xs inline-flex rounded-md">
|
||||
<Menu.Button ref={trigger} as={Button}>
|
||||
<span>Options</span>
|
||||
<svg className="-mr-1 ml-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
@@ -40,7 +40,7 @@ export default function Home() {
|
||||
|
||||
<Portal>
|
||||
<Menu.Items
|
||||
className="w-56 divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg outline-none"
|
||||
className="outline-hidden w-56 divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg"
|
||||
ref={container}
|
||||
>
|
||||
<div className="px-4 py-3">
|
||||
|
||||
@@ -23,7 +23,7 @@ export default function Home() {
|
||||
<div className="flex h-full w-screen justify-center bg-gray-50 p-12">
|
||||
<div className="mt-64 inline-block text-left">
|
||||
<Menu>
|
||||
<span className="rounded-md shadow-sm">
|
||||
<span className="shadow-xs rounded-md">
|
||||
<Menu.Button ref={trigger} as={Button}>
|
||||
<span>Options</span>
|
||||
<svg className="-mr-1 ml-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
@@ -45,7 +45,7 @@ export default function Home() {
|
||||
leaveFrom="transform scale-100 opacity-100"
|
||||
leaveTo="transform scale-95 opacity-0"
|
||||
>
|
||||
<Menu.Items className="divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg outline-none">
|
||||
<Menu.Items className="outline-hidden divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg">
|
||||
<div className="px-4 py-3">
|
||||
<p className="text-sm leading-5">Signed in as</p>
|
||||
<p className="truncate text-sm font-medium leading-5 text-gray-900">
|
||||
|
||||
@@ -15,7 +15,7 @@ export default function Home() {
|
||||
<div className="flex h-full w-screen justify-center bg-gray-50 p-12">
|
||||
<div className="relative inline-block text-left">
|
||||
<Menu>
|
||||
<span className="rounded-md shadow-sm">
|
||||
<span className="shadow-xs rounded-md">
|
||||
<Menu.Button as={Button}>
|
||||
<span>Options</span>
|
||||
<svg className="-mr-1 ml-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
@@ -42,7 +42,7 @@ export default function Home() {
|
||||
>
|
||||
<Menu.Items
|
||||
anchor="bottom start"
|
||||
className="w-[calc(var(--button-width)*2)] divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg outline-none [--anchor-gap:theme(spacing.2)]"
|
||||
className="outline-hidden w-[calc(var(--button-width)*2)] divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg [--anchor-gap:--spacing(2)]"
|
||||
>
|
||||
<div className="px-4 py-3">
|
||||
<p className="text-sm leading-5">Signed in as</p>
|
||||
|
||||
@@ -8,7 +8,7 @@ export default function Home() {
|
||||
<div className="flex h-full w-screen justify-center bg-gray-50 p-12">
|
||||
<div className="relative inline-block text-left">
|
||||
<Menu>
|
||||
<span className="rounded-md shadow-sm">
|
||||
<span className="shadow-xs rounded-md">
|
||||
<Menu.Button as={Button}>
|
||||
<span>Options</span>
|
||||
<svg
|
||||
@@ -25,7 +25,7 @@ export default function Home() {
|
||||
</Menu.Button>
|
||||
</span>
|
||||
|
||||
<Menu.Items className="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg outline-none">
|
||||
<Menu.Items className="outline-hidden absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg">
|
||||
<div className="px-4 py-3">
|
||||
<p className="text-sm leading-5">Signed in as</p>
|
||||
<p className="truncate text-sm font-medium leading-5 text-gray-900">
|
||||
|
||||
@@ -8,7 +8,7 @@ export default function Home() {
|
||||
<Dropdown />
|
||||
|
||||
<div>
|
||||
<div className="relative rounded-md shadow-sm">
|
||||
<div className="shadow-xs relative rounded-md">
|
||||
<input
|
||||
className="form-input block w-full sm:text-sm sm:leading-5"
|
||||
placeholder="you@example.com"
|
||||
@@ -33,7 +33,7 @@ function Dropdown() {
|
||||
return (
|
||||
<div className="relative inline-block text-left">
|
||||
<Menu>
|
||||
<span className="inline-flex rounded-md shadow-sm">
|
||||
<span className="shadow-xs inline-flex rounded-md">
|
||||
<Menu.Button as={Button}>
|
||||
<span>Options</span>
|
||||
<svg className="-mr-1 ml-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
@@ -46,7 +46,7 @@ function Dropdown() {
|
||||
</Menu.Button>
|
||||
</span>
|
||||
|
||||
<Menu.Items className="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg outline-none">
|
||||
<Menu.Items className="outline-hidden absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg">
|
||||
<div className="px-4 py-3">
|
||||
<p className="text-sm leading-5">Signed in as</p>
|
||||
<p className="truncate text-sm font-medium leading-5 text-gray-900">tom@example.com</p>
|
||||
|
||||
@@ -5,7 +5,7 @@ let Button = forwardRef(
|
||||
(props: React.ComponentProps<'button'>, ref: React.MutableRefObject<HTMLButtonElement>) => {
|
||||
return (
|
||||
<Popover.Button
|
||||
className="border-2 border-transparent bg-gray-300 px-3 py-2 text-left focus:border-blue-900 focus:outline-none"
|
||||
className="focus:outline-hidden border-2 border-transparent bg-gray-300 px-3 py-2 text-left focus:border-blue-900"
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
@@ -33,7 +33,7 @@ export default function Home() {
|
||||
<Popover.Overlay className="fixed inset-0 z-20 bg-gray-500 bg-opacity-75"></Popover.Overlay>
|
||||
</Transition>
|
||||
|
||||
<Popover.Button className="relative z-30 border-2 border-transparent bg-gray-300 px-3 py-2 focus:border-blue-900 focus:outline-none">
|
||||
<Popover.Button className="focus:outline-hidden relative z-30 border-2 border-transparent bg-gray-300 px-3 py-2 focus:border-blue-900">
|
||||
Normal
|
||||
</Popover.Button>
|
||||
<Popover.Panel className="absolute z-30 flex w-64 flex-col border-2 border-blue-900 bg-gray-100">
|
||||
@@ -61,7 +61,7 @@ export default function Home() {
|
||||
<Button>Portal</Button>
|
||||
<Popover.Panel
|
||||
anchor="bottom start"
|
||||
className="flex w-64 flex-col border-2 border-blue-900 bg-gray-100 [--anchor-gap:theme(spacing.1)]"
|
||||
className="flex w-64 flex-col border-2 border-blue-900 bg-gray-100 [--anchor-gap:--spacing(1)]"
|
||||
>
|
||||
{items.map((item) => (
|
||||
<Button key={item}>Portal - {item}</Button>
|
||||
@@ -74,7 +74,7 @@ export default function Home() {
|
||||
<Popover.Panel
|
||||
focus
|
||||
anchor="bottom start"
|
||||
className="flex w-64 flex-col border-2 border-blue-900 bg-gray-100 [--anchor-gap:theme(spacing.1)]"
|
||||
className="flex w-64 flex-col border-2 border-blue-900 bg-gray-100 [--anchor-gap:--spacing(1)]"
|
||||
>
|
||||
{items.map((item) => (
|
||||
<Button key={item}>Focus in Portal - {item}</Button>
|
||||
|
||||
@@ -44,7 +44,7 @@ export default function Home() {
|
||||
access.length - 1 === i && 'rounded-bl-md rounded-br-md',
|
||||
|
||||
// Shared
|
||||
'relative flex border p-4 focus:outline-none',
|
||||
'focus:outline-hidden relative flex border p-4',
|
||||
active ? 'z-10 border-indigo-200 bg-indigo-50' : 'border-gray-200'
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
@import 'tailwindcss';
|
||||
@plugin '@tailwindcss/forms';
|
||||
@plugin '@tailwindcss/typography';
|
||||
@plugin '@headlessui/tailwindcss';
|
||||
|
||||
/*
|
||||
The default border color has changed to `currentcolor` in Tailwind CSS v4,
|
||||
so we've added these compatibility styles to make sure everything still
|
||||
looks the same as it did with Tailwind CSS v3.
|
||||
|
||||
If we ever want to remove these styles, we need to add an explicit border
|
||||
color utility to any element that depends on these defaults.
|
||||
*/
|
||||
@layer base {
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-gray-200, currentcolor);
|
||||
}
|
||||
}
|
||||
@@ -19,7 +19,7 @@ export default function Index() {
|
||||
<h1 className="p-8 text-3xl font-bold">Suspense + Portals</h1>
|
||||
|
||||
<Portal>
|
||||
<div className="absolute right-48 top-24 z-10 flex h-32 w-32 flex-col items-center justify-center rounded border border-black/5 bg-white bg-clip-padding p-px shadow">
|
||||
<div className="absolute right-48 top-24 z-10 flex h-32 w-32 flex-col items-center justify-center rounded-sm border border-black/5 bg-white bg-clip-padding p-px shadow-sm">
|
||||
<div className="w-full rounded-t-sm bg-gray-100 p-1 text-center text-gray-700">
|
||||
Instant
|
||||
</div>
|
||||
@@ -29,7 +29,7 @@ export default function Index() {
|
||||
</div>
|
||||
</Portal>
|
||||
<Portal>
|
||||
<div className="absolute right-8 top-24 z-10 flex h-32 w-32 flex-col items-center justify-center rounded border border-black/5 bg-white bg-clip-padding p-px shadow">
|
||||
<div className="absolute right-8 top-24 z-10 flex h-32 w-32 flex-col items-center justify-center rounded-sm border border-black/5 bg-white bg-clip-padding p-px shadow-sm">
|
||||
<div className="w-full rounded-t-sm bg-gray-100 p-1 text-center text-gray-700">
|
||||
Instant
|
||||
</div>
|
||||
@@ -44,7 +44,7 @@ export default function Index() {
|
||||
{(env) => (
|
||||
<div>
|
||||
<Portal>
|
||||
<div className="absolute right-48 top-64 z-10 flex h-32 w-32 flex-col items-center justify-center rounded border border-black/5 bg-white bg-clip-padding p-px shadow">
|
||||
<div className="absolute right-48 top-64 z-10 flex h-32 w-32 flex-col items-center justify-center rounded-sm border border-black/5 bg-white bg-clip-padding p-px shadow-sm">
|
||||
<div className="w-full rounded-t-sm bg-gray-100 p-1 text-center text-gray-700">
|
||||
Suspense
|
||||
</div>
|
||||
@@ -54,7 +54,7 @@ export default function Index() {
|
||||
</div>
|
||||
</Portal>
|
||||
<Portal>
|
||||
<div className="absolute right-8 top-64 z-10 flex h-32 w-32 flex-col items-center justify-center rounded border border-black/5 bg-white bg-clip-padding p-px shadow">
|
||||
<div className="absolute right-8 top-64 z-10 flex h-32 w-32 flex-col items-center justify-center rounded-sm border border-black/5 bg-white bg-clip-padding p-px shadow-sm">
|
||||
<div className="w-full rounded-t-sm bg-gray-100 p-1 text-center text-gray-700">
|
||||
Suspense
|
||||
</div>
|
||||
|
||||
@@ -17,7 +17,7 @@ export default function Home() {
|
||||
onChange={setState}
|
||||
className={({ checked }) =>
|
||||
classNames(
|
||||
'focus:shadow-outline relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none',
|
||||
'focus:shadow-outline focus:outline-hidden relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out',
|
||||
checked ? 'bg-indigo-600 hover:bg-indigo-800' : 'bg-gray-200 hover:bg-gray-400'
|
||||
)
|
||||
}
|
||||
|
||||
@@ -24,7 +24,7 @@ export default function Home() {
|
||||
onChange={setManual}
|
||||
className={({ checked }) =>
|
||||
classNames(
|
||||
'focus:shadow-outline relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none',
|
||||
'focus:shadow-outline focus:outline-hidden relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out',
|
||||
checked ? 'bg-indigo-600' : 'bg-gray-200'
|
||||
)
|
||||
}
|
||||
@@ -46,7 +46,7 @@ export default function Home() {
|
||||
manual={manual}
|
||||
defaultIndex={2}
|
||||
>
|
||||
<Tab.List className="relative z-0 flex divide-x divide-gray-200 rounded-lg shadow">
|
||||
<Tab.List className="relative z-0 flex divide-x divide-gray-200 rounded-lg shadow-sm">
|
||||
{tabs.map((tab, tabIdx) => (
|
||||
<Tab
|
||||
key={tab.name}
|
||||
@@ -80,7 +80,7 @@ export default function Home() {
|
||||
|
||||
<Tab.Panels className="mt-4">
|
||||
{tabs.map((tab) => (
|
||||
<Tab.Panel className="rounded-lg bg-white p-4 shadow" key={tab.name}>
|
||||
<Tab.Panel className="rounded-lg bg-white p-4 shadow-sm" key={tab.name}>
|
||||
{tab.content}
|
||||
</Tab.Panel>
|
||||
))}
|
||||
|
||||
@@ -14,7 +14,7 @@ export default function AppearExample() {
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="rounded-md bg-white p-4 shadow ring-1 ring-black/5">
|
||||
<div className="rounded-md bg-white p-4 shadow-sm ring-1 ring-black/5">
|
||||
<span className="mb-2">Initial render</span>
|
||||
<div className="grid max-w-6xl grid-cols-4 gap-4">
|
||||
<Transition
|
||||
@@ -152,7 +152,7 @@ export default function AppearExample() {
|
||||
</div>
|
||||
|
||||
{lazy && (
|
||||
<div className="rounded-md bg-white p-4 shadow ring-1 ring-black/5">
|
||||
<div className="rounded-md bg-white p-4 shadow-sm ring-1 ring-black/5">
|
||||
<span className="mb-2">Not on the initial render</span>
|
||||
<div className="grid max-w-6xl grid-cols-4 gap-4">
|
||||
<Transition
|
||||
|
||||
@@ -41,11 +41,11 @@ function After({ open }: { open: boolean }) {
|
||||
// Defaults
|
||||
'h-20 w-48 border bg-blue-500 p-2 text-white transition ease-in-out',
|
||||
// Closed
|
||||
'data-[closed]:opacity-0',
|
||||
'data-closed:opacity-0',
|
||||
// Entering
|
||||
'data-[enter]:data-[closed]:-translate-x-full data-[enter]:duration-300',
|
||||
'data-enter:duration-300 data-enter:data-closed:-translate-x-full',
|
||||
// Leaving
|
||||
'data-[leave]:data-[closed]:translate-x-full data-[leave]:duration-300',
|
||||
'data-leave:duration-300 data-leave:data-closed:translate-x-full',
|
||||
])}
|
||||
>
|
||||
Using data attributes
|
||||
|
||||
@@ -22,10 +22,10 @@ function Dropdown() {
|
||||
return (
|
||||
<div className="relative inline-block text-left">
|
||||
<div>
|
||||
<span className="rounded-md shadow-sm">
|
||||
<span className="shadow-xs rounded-md">
|
||||
<button
|
||||
type="button"
|
||||
className="focus:shadow-outline-blue inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 focus:outline-none active:bg-gray-50 active:text-gray-800"
|
||||
className="focus:shadow-outline-blue focus:outline-hidden inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 active:bg-gray-50 active:text-gray-800"
|
||||
id="options-menu"
|
||||
aria-haspopup="true"
|
||||
aria-expanded={isOpen}
|
||||
@@ -54,7 +54,7 @@ function Dropdown() {
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
className="absolute right-0 mt-2 w-56 origin-top-right rounded-md shadow-lg"
|
||||
>
|
||||
<div className="shadow-xs rounded-md bg-white">
|
||||
<div className="shadow-2xs rounded-md bg-white">
|
||||
<div
|
||||
className="py-1"
|
||||
role="menu"
|
||||
@@ -63,21 +63,21 @@ function Dropdown() {
|
||||
>
|
||||
<a
|
||||
href="/"
|
||||
className="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900 focus:outline-none"
|
||||
className="focus:outline-hidden block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900"
|
||||
role="menuitem"
|
||||
>
|
||||
Account settings
|
||||
</a>
|
||||
<a
|
||||
href="/"
|
||||
className="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900 focus:outline-none"
|
||||
className="focus:outline-hidden block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900"
|
||||
role="menuitem"
|
||||
>
|
||||
Support
|
||||
</a>
|
||||
<a
|
||||
href="/"
|
||||
className="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900 focus:outline-none"
|
||||
className="focus:outline-hidden block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900"
|
||||
role="menuitem"
|
||||
>
|
||||
License
|
||||
@@ -85,7 +85,7 @@ function Dropdown() {
|
||||
<form method="POST" action="#">
|
||||
<button
|
||||
type="submit"
|
||||
className="block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900 focus:outline-none"
|
||||
className="focus:outline-hidden block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900"
|
||||
role="menuitem"
|
||||
>
|
||||
Sign out
|
||||
|
||||
@@ -19,11 +19,11 @@ export default function Home() {
|
||||
<div>
|
||||
<div className="flex space-x-4 p-12">
|
||||
<div className="inline-block p-12">
|
||||
<span className="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto">
|
||||
<span className="shadow-xs mt-3 flex w-full rounded-md sm:mt-0 sm:w-auto">
|
||||
<button
|
||||
onClick={toggle}
|
||||
type="button"
|
||||
className="focus:shadow-outline-blue inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium leading-6 text-gray-700 shadow-sm transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 focus:outline-none sm:text-sm sm:leading-5"
|
||||
className="focus:shadow-outline-blue shadow-xs focus:outline-hidden inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium leading-6 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 sm:text-sm sm:leading-5"
|
||||
>
|
||||
Show modal
|
||||
</button>
|
||||
@@ -97,7 +97,7 @@ export default function Home() {
|
||||
>
|
||||
<div className="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
|
||||
<div className="sm:flex sm:items-start">
|
||||
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
{/* Heroicon name: exclamation */}
|
||||
<svg
|
||||
className="h-6 w-6 text-red-600"
|
||||
@@ -132,7 +132,7 @@ export default function Home() {
|
||||
>
|
||||
Email address
|
||||
</label>
|
||||
<div className="relative mt-1 rounded-md shadow-sm">
|
||||
<div className="shadow-xs relative mt-1 rounded-md">
|
||||
<input
|
||||
ref={inputRef}
|
||||
value={email}
|
||||
@@ -149,19 +149,19 @@ export default function Home() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
|
||||
<span className="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
|
||||
<span className="shadow-xs flex w-full rounded-md sm:ml-3 sm:w-auto">
|
||||
<button
|
||||
type="button"
|
||||
className="focus:shadow-outline-red inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium leading-6 text-white shadow-sm transition duration-150 ease-in-out hover:bg-red-500 focus:border-red-700 focus:outline-none sm:text-sm sm:leading-5"
|
||||
className="focus:shadow-outline-red shadow-xs focus:outline-hidden inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium leading-6 text-white transition duration-150 ease-in-out hover:bg-red-500 focus:border-red-700 sm:text-sm sm:leading-5"
|
||||
>
|
||||
Deactivate
|
||||
</button>
|
||||
</span>
|
||||
<span className="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto">
|
||||
<span className="shadow-xs mt-3 flex w-full rounded-md sm:mt-0 sm:w-auto">
|
||||
<button
|
||||
onClick={toggle}
|
||||
type="button"
|
||||
className="focus:shadow-outline-blue inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium leading-6 text-gray-700 shadow-sm transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 focus:outline-none sm:text-sm sm:leading-5"
|
||||
className="focus:shadow-outline-blue shadow-xs focus:outline-hidden inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium leading-6 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 sm:text-sm sm:leading-5"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
@@ -8,11 +8,11 @@ export default function Home() {
|
||||
<>
|
||||
<div className="flex h-full w-screen justify-center bg-gray-50 p-12">
|
||||
<div className="w-96 space-y-2">
|
||||
<span className="inline-flex rounded-md shadow-sm">
|
||||
<span className="shadow-xs inline-flex rounded-md">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsOpen((v) => !v)}
|
||||
className="duration-150-out focus:shadow-outline-blue inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-700 transition hover:text-gray-500 focus:border-blue-300 focus:outline-none active:bg-gray-50 active:text-gray-800"
|
||||
className="duration-150-out focus:shadow-outline-blue focus:outline-hidden inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-700 transition hover:text-gray-500 focus:border-blue-300 active:bg-gray-50 active:text-gray-800"
|
||||
>
|
||||
{isOpen ? 'Hide' : 'Show'}
|
||||
</button>
|
||||
@@ -51,7 +51,7 @@ function Box({ children }: { children?: ReactNode }) {
|
||||
leaveFrom="transform translate-x-0"
|
||||
leaveTo="transform translate-x-full"
|
||||
>
|
||||
<div className="space-y-2 rounded-md bg-white p-4 text-sm font-semibold uppercase tracking-wide text-gray-700 shadow">
|
||||
<div className="space-y-2 rounded-md bg-white p-4 text-sm font-semibold uppercase tracking-wide text-gray-700 shadow-sm">
|
||||
<span>This is a box</span>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
@@ -8,11 +8,11 @@ export default function Home() {
|
||||
<>
|
||||
<div className="flex h-full w-screen justify-center bg-gray-50 p-12">
|
||||
<div className="w-96 space-y-2">
|
||||
<span className="inline-flex rounded-md shadow-sm">
|
||||
<span className="shadow-xs inline-flex rounded-md">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsOpen((v) => !v)}
|
||||
className="duration-150-out focus:shadow-outline-blue inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-700 transition hover:text-gray-500 focus:border-blue-300 focus:outline-none active:bg-gray-50 active:text-gray-800"
|
||||
className="duration-150-out focus:shadow-outline-blue focus:outline-hidden inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-700 transition hover:text-gray-500 focus:border-blue-300 active:bg-gray-50 active:text-gray-800"
|
||||
>
|
||||
{isOpen ? 'Hide' : 'Show'}
|
||||
</button>
|
||||
@@ -52,7 +52,7 @@ function Box({ children }: { children?: ReactNode }) {
|
||||
leaveFrom="transform translate-x-0"
|
||||
leaveTo="transform translate-x-full"
|
||||
>
|
||||
<div className="space-y-2 rounded-md bg-white p-4 text-sm font-semibold uppercase tracking-wide text-gray-700 shadow">
|
||||
<div className="space-y-2 rounded-md bg-white p-4 text-sm font-semibold uppercase tracking-wide text-gray-700 shadow-sm">
|
||||
<span>This is a box</span>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
@@ -8,11 +8,11 @@ export default function Home() {
|
||||
<>
|
||||
<div className="flex h-full w-screen justify-center bg-gray-50 p-12">
|
||||
<div className="w-96 space-y-2">
|
||||
<span className="inline-flex rounded-md shadow-sm">
|
||||
<span className="shadow-xs inline-flex rounded-md">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsOpen((v) => !v)}
|
||||
className="focus:shadow-outline-blue inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 focus:outline-none active:bg-gray-50 active:text-gray-800"
|
||||
className="focus:shadow-outline-blue focus:outline-hidden inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 active:bg-gray-50 active:text-gray-800"
|
||||
>
|
||||
{isOpen ? 'Hide' : 'Show'}
|
||||
</button>
|
||||
@@ -33,7 +33,7 @@ export default function Home() {
|
||||
leaveFrom="transform bg-blue-500"
|
||||
leaveTo="transform bg-red-500"
|
||||
entered="bg-blue-500"
|
||||
className="h-64 rounded-md p-4 shadow"
|
||||
className="h-64 rounded-md p-4 shadow-sm"
|
||||
>
|
||||
Contents to show and hide
|
||||
</Transition>
|
||||
|
||||
@@ -35,11 +35,11 @@ enum Direction {
|
||||
|
||||
let pages = ['Dashboard', 'Team', 'Projects', 'Calendar', 'Reports']
|
||||
let colors = [
|
||||
'bg-gradient-to-r from-teal-400 to-blue-400',
|
||||
'bg-gradient-to-r from-blue-400 to-orange-400',
|
||||
'bg-gradient-to-r from-orange-400 to-purple-400',
|
||||
'bg-gradient-to-r from-purple-400 to-green-400',
|
||||
'bg-gradient-to-r from-green-400 to-teal-400',
|
||||
'bg-linear-to-r from-teal-400 to-blue-400',
|
||||
'bg-linear-to-r from-blue-400 to-orange-400',
|
||||
'bg-linear-to-r from-orange-400 to-purple-400',
|
||||
'bg-linear-to-r from-purple-400 to-green-400',
|
||||
'bg-linear-to-r from-green-400 to-teal-400',
|
||||
]
|
||||
|
||||
function FullPageTransition() {
|
||||
@@ -75,7 +75,7 @@ function FullPageTransition() {
|
||||
<div className="border-b border-gray-700">
|
||||
<div className="flex h-16 items-center justify-between px-4 sm:px-0">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="shrink-0">
|
||||
<img
|
||||
className="h-8 w-8"
|
||||
src="https://tailwindui.com/img/logos/workflow-mark-on-dark.svg"
|
||||
@@ -89,7 +89,7 @@ function FullPageTransition() {
|
||||
key={page}
|
||||
onClick={() => setActivePage(i)}
|
||||
className={classNames(
|
||||
'rounded-md px-3 py-2 text-sm font-medium focus:bg-gray-700 focus:text-white focus:outline-none',
|
||||
'focus:outline-hidden rounded-md px-3 py-2 text-sm font-medium focus:bg-gray-700 focus:text-white',
|
||||
i === activePage
|
||||
? 'bg-gray-900 text-white'
|
||||
: 'text-gray-300 hover:bg-gray-700 hover:text-white'
|
||||
@@ -104,7 +104,7 @@ function FullPageTransition() {
|
||||
<div className="hidden md:block">
|
||||
<div className="ml-4 flex items-center md:ml-6">
|
||||
<button
|
||||
className="rounded-full border-2 border-transparent p-1 text-gray-400 hover:text-white focus:bg-gray-700 focus:text-white focus:outline-none"
|
||||
className="focus:outline-hidden rounded-full border-2 border-transparent p-1 text-gray-400 hover:text-white focus:bg-gray-700 focus:text-white"
|
||||
aria-label="Notifications"
|
||||
>
|
||||
<svg
|
||||
@@ -126,7 +126,7 @@ function FullPageTransition() {
|
||||
<div className="relative ml-3">
|
||||
<div>
|
||||
<button
|
||||
className="focus:shadow-solid flex max-w-xs items-center rounded-full text-sm text-white focus:outline-none"
|
||||
className="focus:shadow-solid focus:outline-hidden flex max-w-xs items-center rounded-full text-sm text-white"
|
||||
id="user-menu"
|
||||
aria-label="User menu"
|
||||
aria-haspopup="true"
|
||||
@@ -156,7 +156,7 @@ function FullPageTransition() {
|
||||
|
||||
<main className="-mt-32">
|
||||
<div className="mx-auto max-w-7xl px-4 pb-12 sm:px-6 lg:px-8">
|
||||
<div className="rounded-lg bg-white px-5 py-6 shadow sm:px-6">
|
||||
<div className="rounded-lg bg-white px-5 py-6 shadow-sm sm:px-6">
|
||||
<div className="relative h-96 overflow-hidden rounded-lg">
|
||||
{pages.map((page, i) => (
|
||||
<Transition
|
||||
|
||||
@@ -63,7 +63,7 @@ export default function App() {
|
||||
<div className="absolute right-0 top-0 -mr-14 p-1">
|
||||
<Transition.Child
|
||||
unmount={false}
|
||||
className="focus:bg-cool-gray-600 flex h-12 w-12 items-center justify-center rounded-full focus:outline-none"
|
||||
className="focus:bg-cool-gray-600 focus:outline-hidden flex h-12 w-12 items-center justify-center rounded-full"
|
||||
aria-label="Close sidebar"
|
||||
as="button"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
@@ -83,7 +83,7 @@ export default function App() {
|
||||
</svg>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
<div className="flex flex-shrink-0 items-center px-4">
|
||||
<div className="flex shrink-0 items-center px-4">
|
||||
<img
|
||||
className="h-8 w-auto"
|
||||
src="https://tailwindui.com/img/logos/easywire-logo-on-brand.svg"
|
||||
@@ -91,17 +91,17 @@ export default function App() {
|
||||
/>
|
||||
</div>
|
||||
</Transition.Child>
|
||||
<div className="w-14 flex-shrink-0">
|
||||
<div className="w-14 shrink-0">
|
||||
{/* Dummy element to force sidebar to shrink to fit close icon */}
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
{/* Static sidebar for desktop */}
|
||||
<div className="hidden lg:flex lg:flex-shrink-0">
|
||||
<div className="hidden lg:flex lg:shrink-0">
|
||||
<div className="flex w-64 flex-col">
|
||||
{/* Sidebar component, swap this element with another sidebar if you like */}
|
||||
<div className="flex flex-grow flex-col overflow-y-auto bg-teal-600 pb-4 pt-5">
|
||||
<div className="flex flex-shrink-0 items-center px-4">
|
||||
<div className="flex grow flex-col overflow-y-auto bg-teal-600 pb-4 pt-5">
|
||||
<div className="flex shrink-0 items-center px-4">
|
||||
<img
|
||||
className="h-8 w-auto"
|
||||
src="https://tailwindui.com/img/logos/easywire-logo-on-brand.svg"
|
||||
@@ -111,10 +111,10 @@ export default function App() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 overflow-auto focus:outline-none" tabIndex={0}>
|
||||
<div className="relative z-10 flex h-16 flex-shrink-0 border-b border-gray-200 bg-white lg:border-none">
|
||||
<div className="focus:outline-hidden flex-1 overflow-auto" tabIndex={0}>
|
||||
<div className="relative z-10 flex h-16 shrink-0 border-b border-gray-200 bg-white lg:border-none">
|
||||
<button
|
||||
className="border-cool-gray-200 text-cool-gray-400 focus:bg-cool-gray-100 focus:text-cool-gray-600 border-r px-4 focus:outline-none lg:hidden"
|
||||
className="border-cool-gray-200 text-cool-gray-400 focus:bg-cool-gray-100 focus:text-cool-gray-600 focus:outline-hidden border-r px-4 lg:hidden"
|
||||
aria-label="Open sidebar"
|
||||
onClick={() => setMobileOpen(true)}
|
||||
>
|
||||
@@ -151,7 +151,7 @@ export default function App() {
|
||||
</div>
|
||||
<input
|
||||
id="search_field"
|
||||
className="text-cool-gray-900 placeholder-cool-gray-500 focus:placeholder-cool-gray-400 block h-full w-full rounded-md py-2 pl-8 pr-3 focus:outline-none sm:text-sm"
|
||||
className="text-cool-gray-900 placeholder-cool-gray-500 focus:placeholder-cool-gray-400 focus:outline-hidden block h-full w-full rounded-md py-2 pl-8 pr-3 sm:text-sm"
|
||||
placeholder="Search"
|
||||
type="search"
|
||||
/>
|
||||
|
||||
@@ -9,7 +9,7 @@ const TailwindToaster = () => {
|
||||
appear
|
||||
as="div"
|
||||
show={t.visible}
|
||||
className="flex transform rounded bg-white p-4 shadow-lg"
|
||||
className="flex transform rounded-sm bg-white p-4 shadow-lg"
|
||||
enter="transition-all duration-500"
|
||||
enterFrom="opacity-0 scale-50"
|
||||
enterTo="opacity-100 scale-100"
|
||||
@@ -29,7 +29,7 @@ export default function App() {
|
||||
return (
|
||||
<div className="m-8">
|
||||
<button
|
||||
className="rounded bg-blue-500 p-4 text-white"
|
||||
className="rounded-sm bg-blue-500 p-4 text-white"
|
||||
onClick={() => toast.success('This is Tailwind CSS')}
|
||||
>
|
||||
Create TailwindCSS Toast
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
'@tailwindcss/postcss': {},
|
||||
},
|
||||
}
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
/** @type {import('tailwindcss/types').Config} */
|
||||
let config = {
|
||||
content: ['./{pages,components}/**/*.{js,ts,jsx,tsx}'],
|
||||
plugins: [
|
||||
require('@tailwindcss/forms'),
|
||||
require('@tailwindcss/typography'),
|
||||
require('@headlessui/tailwindcss'),
|
||||
],
|
||||
}
|
||||
|
||||
module.exports = config
|
||||
@@ -20,10 +20,10 @@
|
||||
"@headlessui/vue": "*",
|
||||
"@heroicons/vue": "^1.0.6",
|
||||
"@tailwindcss/forms": "^0.5.2",
|
||||
"@tailwindcss/postcss": "^4.1.3",
|
||||
"@tailwindcss/typography": "^0.5.2",
|
||||
"autoprefixer": "^10.4.7",
|
||||
"postcss": "^8.4.14",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"tailwindcss": "^4.1.3",
|
||||
"vue": "^3.4.27",
|
||||
"vue-flatpickr-component": "^9.0.5",
|
||||
"vue-router": "^4.3.2"
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
'@tailwindcss/postcss': {},
|
||||
},
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div
|
||||
class="pointer-events-none fixed bottom-4 right-4 z-50 cursor-default select-none overflow-hidden rounded-md bg-blue-800 px-4 py-2 text-2xl tracking-wide text-blue-100 shadow"
|
||||
class="pointer-events-none fixed bottom-4 right-4 z-50 cursor-default select-none overflow-hidden rounded-md bg-blue-800 px-4 py-2 text-2xl tracking-wide text-blue-100 shadow-sm"
|
||||
v-if="keys.length > 0"
|
||||
>
|
||||
{{ keys.slice().reverse().join(' ') }}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
class="flex h-screen flex-col overflow-hidden bg-gray-700 font-sans text-gray-900 antialiased"
|
||||
>
|
||||
<header
|
||||
class="relative z-10 flex flex-shrink-0 items-center justify-between border-b border-gray-200 bg-gray-700 px-4 py-4 sm:px-6 lg:px-8"
|
||||
class="relative z-10 flex shrink-0 items-center justify-between border-b border-gray-200 bg-gray-700 px-4 py-4 sm:px-6 lg:px-8"
|
||||
>
|
||||
<router-link to="/">
|
||||
<svg class="h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 243 42">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<button
|
||||
type="button"
|
||||
class="ui-focus-visible:ring-2 ui-focus-visible:ring-offset-2 flex items-center rounded-md border border-gray-300 bg-white px-2 py-1 ring-gray-500 ring-offset-gray-100 focus:outline-none"
|
||||
class="focus:outline-hidden ui-focus-visible:ring-2 ui-focus-visible:ring-offset-2 flex items-center rounded-md border border-gray-300 bg-white px-2 py-1 ring-gray-500 ring-offset-gray-100"
|
||||
v-bind="$props"
|
||||
>
|
||||
<slot></slot>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<Switch
|
||||
:defaultChecked="true"
|
||||
name="notifications"
|
||||
class="ui-checked:bg-blue-600 ui-not-checked:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
class="focus:outline-hidden ui-checked:bg-blue-600 ui-not-checked:bg-gray-200 relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
>
|
||||
<span
|
||||
class="ui-checked:translate-x-5 ui-not-checked:translate-x-0 inline-block h-5 w-5 transform rounded-full bg-white"
|
||||
@@ -29,7 +29,7 @@
|
||||
<Switch
|
||||
name="fruit[]"
|
||||
value="apple"
|
||||
class="ui-checked:bg-blue-600 ui-not-checked:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
class="focus:outline-hidden ui-checked:bg-blue-600 ui-not-checked:bg-gray-200 relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
>
|
||||
<span
|
||||
class="ui-checked:translate-x-5 ui-not-checked:translate-x-0 inline-block h-5 w-5 transform rounded-full bg-white"
|
||||
@@ -42,7 +42,7 @@
|
||||
<Switch
|
||||
name="fruit[]"
|
||||
value="banana"
|
||||
class="ui-checked:bg-blue-600 ui-not-checked:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
class="focus:outline-hidden ui-checked:bg-blue-600 ui-not-checked:bg-gray-200 relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
>
|
||||
<span
|
||||
class="ui-checked:translate-x-5 ui-not-checked:translate-x-0 inline-block h-5 w-5 transform rounded-full bg-white"
|
||||
@@ -58,7 +58,7 @@
|
||||
v-for="size in sizes"
|
||||
:key="size"
|
||||
:value="size"
|
||||
class="ui-active:z-10 ui-active:border-blue-200 ui-active:bg-blue-50 ui-not-active:border-gray-200 relative flex w-20 border px-2 py-4 first:rounded-l-md last:rounded-r-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
class="focus:outline-hidden ui-active:z-10 ui-active:border-blue-200 ui-active:bg-blue-50 ui-not-active:border-gray-200 relative flex w-20 border px-2 py-4 first:rounded-l-md last:rounded-r-md focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
>
|
||||
<div class="flex w-full items-center justify-between">
|
||||
<div class="ml-3 flex cursor-pointer flex-col">
|
||||
@@ -93,9 +93,9 @@
|
||||
<div class="w-full space-y-1">
|
||||
<Listbox name="person" :defaultValue="people[1]" v-slot="{ value }">
|
||||
<div class="relative">
|
||||
<span class="inline-block w-full rounded-md shadow-sm">
|
||||
<span class="shadow-xs inline-block w-full rounded-md">
|
||||
<ListboxButton
|
||||
class="relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:text-sm sm:leading-5"
|
||||
class="focus:outline-hidden relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:text-sm sm:leading-5"
|
||||
>
|
||||
<span class="block truncate">{{ value?.name?.first }}</span>
|
||||
<span
|
||||
@@ -120,7 +120,7 @@
|
||||
|
||||
<div class="absolute z-10 mt-1 w-full rounded-md bg-white shadow-lg">
|
||||
<ListboxOptions
|
||||
class="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5"
|
||||
class="shadow-2xs focus:outline-hidden max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5"
|
||||
>
|
||||
<ListboxOption
|
||||
v-for="person in people"
|
||||
@@ -163,7 +163,7 @@
|
||||
<div class="flex w-full flex-col">
|
||||
<ComboboxInput
|
||||
@change="query = $event.target.value"
|
||||
class="w-full rounded-md border-gray-300 bg-clip-padding px-3 py-1 shadow-sm focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
class="shadow-xs focus:outline-hidden w-full rounded-md border-gray-300 bg-clip-padding px-3 py-1 focus:border-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
placeholder="Search users..."
|
||||
/>
|
||||
<div
|
||||
@@ -172,7 +172,7 @@
|
||||
>
|
||||
<div class="absolute z-10 mt-1 w-full rounded-md bg-white shadow-lg">
|
||||
<ComboboxOptions
|
||||
class="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5"
|
||||
class="shadow-2xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5"
|
||||
>
|
||||
<ComboboxOption
|
||||
v-for="location in locations.filter((l) =>
|
||||
@@ -188,7 +188,7 @@
|
||||
{{ location }}
|
||||
</span>
|
||||
<span
|
||||
class="ui-active:block ui-not-active:hidden ui-active:text-white ui-not-active:text-blue-600 absolute inset-y-0 right-0 flex items-center pr-4"
|
||||
class="ui-active:block ui-active:text-white ui-not-active:hidden ui-not-active:text-blue-600 absolute inset-y-0 right-0 flex items-center pr-4"
|
||||
>
|
||||
<svg class="h-5 w-5" viewBox="0 0 25 24" fill="none">
|
||||
<path
|
||||
@@ -213,14 +213,14 @@
|
||||
|
||||
<div class="space-x-4">
|
||||
<button
|
||||
class="rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium leading-6 text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:text-sm sm:leading-5"
|
||||
class="shadow-xs focus:outline-hidden rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium leading-6 text-gray-700 hover:text-gray-500 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:text-sm sm:leading-5"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="reset"
|
||||
class="rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium leading-6 text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:text-sm sm:leading-5"
|
||||
class="shadow-xs focus:outline-hidden rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium leading-6 text-gray-700 hover:text-gray-500 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:text-sm sm:leading-5"
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
|
||||
@@ -14,13 +14,13 @@
|
||||
</ComboboxLabel>
|
||||
|
||||
<div class="relative">
|
||||
<span class="relative inline-flex flex-row overflow-hidden rounded-md border shadow-sm">
|
||||
<span class="shadow-xs relative inline-flex flex-row overflow-hidden rounded-md border">
|
||||
<ComboboxInput
|
||||
@change="query = $event.target.value"
|
||||
class="border-none px-3 py-1 outline-none"
|
||||
class="outline-hidden border-none px-3 py-1"
|
||||
/>
|
||||
<ComboboxButton
|
||||
class="cursor-default border-l bg-gray-100 px-1 text-indigo-600 focus:outline-none"
|
||||
class="focus:outline-hidden cursor-default border-l bg-gray-100 px-1 text-indigo-600"
|
||||
>
|
||||
<span class="pointer-events-none flex items-center px-2">
|
||||
<svg
|
||||
@@ -43,7 +43,7 @@
|
||||
<div class="absolute mt-1 w-full rounded-md bg-white shadow-lg">
|
||||
<ComboboxOptions
|
||||
v-if="!virtual"
|
||||
class="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5"
|
||||
class="shadow-2xs focus:outline-hidden max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5"
|
||||
>
|
||||
<ComboboxOption
|
||||
v-for="(timezone, idx) in timezones"
|
||||
@@ -55,7 +55,7 @@
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
'relative w-full cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
|
||||
'focus:outline-hidden relative w-full cursor-default select-none py-2 pl-3 pr-9',
|
||||
active ? 'bg-indigo-600 text-white' : 'text-gray-900',
|
||||
]"
|
||||
>
|
||||
@@ -82,13 +82,13 @@
|
||||
</ComboboxOptions>
|
||||
<ComboboxOptions
|
||||
v-if="virtual"
|
||||
class="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5"
|
||||
class="shadow-2xs focus:outline-hidden max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5"
|
||||
v-slot="{ option: timezone }"
|
||||
>
|
||||
<ComboboxOption :value="timezone" v-slot="{ active, selected }" as="template">
|
||||
<li
|
||||
:class="[
|
||||
'relative w-full cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
|
||||
'focus:outline-hidden relative w-full cursor-default select-none py-2 pl-3 pr-9',
|
||||
active ? 'bg-indigo-600 text-white' : 'text-gray-900',
|
||||
]"
|
||||
>
|
||||
|
||||
@@ -61,13 +61,13 @@ export default defineComponent({
|
||||
</ComboboxLabel>
|
||||
|
||||
<div class="relative">
|
||||
<span class="relative inline-flex flex-row overflow-hidden rounded-md border shadow-sm">
|
||||
<span class="shadow-xs relative inline-flex flex-row overflow-hidden rounded-md border">
|
||||
<ComboboxInput
|
||||
@change="query = $event.target.value"
|
||||
class="border-none px-3 py-1 outline-none"
|
||||
class="outline-hidden border-none px-3 py-1"
|
||||
/>
|
||||
<ComboboxButton
|
||||
class="cursor-default border-l bg-gray-100 px-1 text-indigo-600 focus:outline-none"
|
||||
class="focus:outline-hidden cursor-default border-l bg-gray-100 px-1 text-indigo-600"
|
||||
>
|
||||
<span class="pointer-events-none flex items-center px-2">
|
||||
<svg
|
||||
@@ -89,7 +89,7 @@ export default defineComponent({
|
||||
|
||||
<div class="absolute mt-1 w-full rounded-md bg-white shadow-lg">
|
||||
<ComboboxOptions
|
||||
class="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5"
|
||||
class="shadow-2xs focus:outline-hidden max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5"
|
||||
>
|
||||
<ComboboxOption
|
||||
v-for="country in filteredCountries"
|
||||
@@ -99,7 +99,7 @@ export default defineComponent({
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
'relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
|
||||
'focus:outline-hidden relative cursor-default select-none py-2 pl-3 pr-9',
|
||||
active ? 'bg-indigo-600 text-white' : 'text-gray-900',
|
||||
]"
|
||||
>
|
||||
|
||||
@@ -73,14 +73,14 @@ export default defineComponent({
|
||||
</ComboboxLabel>
|
||||
|
||||
<div class="relative">
|
||||
<span class="relative inline-flex flex-row overflow-hidden rounded-md border shadow-sm">
|
||||
<span class="shadow-xs relative inline-flex flex-row overflow-hidden rounded-md border">
|
||||
<ComboboxInput
|
||||
@change="query = $event.target.value"
|
||||
:displayValue="(person) => person?.name ?? ''"
|
||||
class="border-none px-3 py-1 outline-none"
|
||||
class="outline-hidden border-none px-3 py-1"
|
||||
/>
|
||||
<ComboboxButton
|
||||
class="cursor-default border-l bg-gray-100 px-1 text-indigo-600 focus:outline-none"
|
||||
class="focus:outline-hidden cursor-default border-l bg-gray-100 px-1 text-indigo-600"
|
||||
>
|
||||
<span class="pointer-events-none flex items-center px-2">
|
||||
<svg
|
||||
@@ -102,7 +102,7 @@ export default defineComponent({
|
||||
|
||||
<div class="absolute mt-1 w-full rounded-md bg-white shadow-lg">
|
||||
<ComboboxOptions
|
||||
class="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5"
|
||||
class="shadow-2xs focus:outline-hidden max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5"
|
||||
>
|
||||
<ComboboxOption
|
||||
v-for="person in filteredPeople"
|
||||
@@ -112,7 +112,7 @@ export default defineComponent({
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
'relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
|
||||
'focus:outline-hidden relative cursor-default select-none py-2 pl-3 pr-9',
|
||||
active ? 'bg-indigo-600 text-white' : 'text-gray-900',
|
||||
]"
|
||||
>
|
||||
|
||||
@@ -74,11 +74,11 @@ let filtered = computed(() => {
|
||||
</ComboboxLabel>
|
||||
|
||||
<div class="relative">
|
||||
<span class="relative inline-flex flex-row overflow-hidden rounded-md border shadow-sm">
|
||||
<span class="shadow-xs relative inline-flex flex-row overflow-hidden rounded-md border">
|
||||
<ComboboxInput
|
||||
@change="(e) => (query = e.target.value)"
|
||||
:displayValue="(option: Option | null) => option?.name ?? ''"
|
||||
class="border-none px-3 py-1 outline-none"
|
||||
class="outline-hidden border-none px-3 py-1"
|
||||
/>
|
||||
<ComboboxButton as="button">
|
||||
<span class="pointer-events-none flex items-center px-2">
|
||||
@@ -103,7 +103,7 @@ let filtered = computed(() => {
|
||||
<ComboboxOptions
|
||||
:ref="optionsRef"
|
||||
:class="[
|
||||
'shadow-xs max-h-60 rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5',
|
||||
'shadow-2xs focus:outline-hidden max-h-60 rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5',
|
||||
filtered.length === 0 ? 'overflow-hidden' : 'overflow-auto',
|
||||
]"
|
||||
v-slot="{ option }"
|
||||
@@ -111,7 +111,7 @@ let filtered = computed(() => {
|
||||
<template v-if="option.empty">
|
||||
<ComboboxOption
|
||||
:value="option"
|
||||
class="relative w-full cursor-default select-none px-3 py-2 text-center focus:outline-none"
|
||||
class="focus:outline-hidden relative w-full cursor-default select-none px-3 py-2 text-center"
|
||||
disabled
|
||||
>
|
||||
<div class="relative grid h-full grid-cols-1 grid-rows-1">
|
||||
@@ -147,7 +147,7 @@ let filtered = computed(() => {
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
'relative w-full cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
|
||||
'focus:outline-hidden relative w-full cursor-default select-none py-2 pl-3 pr-9',
|
||||
active ? 'bg-indigo-600 text-white' : 'text-gray-900',
|
||||
]"
|
||||
>
|
||||
|
||||
@@ -73,14 +73,14 @@ export default defineComponent({
|
||||
</ComboboxLabel>
|
||||
|
||||
<div class="relative">
|
||||
<span class="relative inline-flex flex-row overflow-hidden rounded-md border shadow-sm">
|
||||
<span class="shadow-xs relative inline-flex flex-row overflow-hidden rounded-md border">
|
||||
<ComboboxInput
|
||||
@change="query = $event.target.value"
|
||||
:displayValue="(person) => person?.name ?? ''"
|
||||
class="border-none px-3 py-1 outline-none"
|
||||
class="outline-hidden border-none px-3 py-1"
|
||||
/>
|
||||
<ComboboxButton
|
||||
class="cursor-default border-l bg-gray-100 px-1 text-indigo-600 focus:outline-none"
|
||||
class="focus:outline-hidden cursor-default border-l bg-gray-100 px-1 text-indigo-600"
|
||||
>
|
||||
<span class="pointer-events-none flex items-center px-2">
|
||||
<svg
|
||||
@@ -102,7 +102,7 @@ export default defineComponent({
|
||||
|
||||
<div class="absolute mt-1 w-full rounded-md bg-white shadow-lg">
|
||||
<ComboboxOptions
|
||||
class="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5"
|
||||
class="shadow-2xs focus:outline-hidden max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5"
|
||||
>
|
||||
<ComboboxOption
|
||||
v-for="person in filteredPeople"
|
||||
@@ -112,7 +112,7 @@ export default defineComponent({
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
'relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
|
||||
'focus:outline-hidden relative cursor-default select-none py-2 pl-3 pr-9',
|
||||
active ? 'bg-indigo-600 text-white' : 'text-gray-900',
|
||||
]"
|
||||
>
|
||||
|
||||
@@ -96,19 +96,19 @@ export default defineComponent({
|
||||
<Combobox
|
||||
as="div"
|
||||
v-model="activePerson"
|
||||
class="w-full overflow-hidden rounded border border-black/5 bg-white bg-clip-padding shadow-sm"
|
||||
class="shadow-xs w-full overflow-hidden rounded-sm border border-black/5 bg-white bg-clip-padding"
|
||||
v-slot="{ activeOption }"
|
||||
>
|
||||
<div class="flex w-full flex-col">
|
||||
<ComboboxInput
|
||||
@change="query = $event.target.value"
|
||||
class="w-full rounded-none border-none bg-none px-3 py-1 outline-none"
|
||||
class="outline-hidden w-full rounded-none border-none bg-none px-3 py-1"
|
||||
placeholder="Search users…"
|
||||
:displayValue="displayValue"
|
||||
/>
|
||||
<div class="flex">
|
||||
<ComboboxOptions
|
||||
class="shadow-xs max-h-60 flex-1 overflow-auto text-base leading-6 focus:outline-none sm:text-sm sm:leading-5"
|
||||
class="shadow-2xs focus:outline-hidden max-h-60 flex-1 overflow-auto text-base leading-6 sm:text-sm sm:leading-5"
|
||||
>
|
||||
<template v-for="[letter, people] of sortedGroups" :key="letter">
|
||||
<div class="bg-gray-100 px-4 py-2">{{ letter }}</div>
|
||||
@@ -120,7 +120,7 @@ export default defineComponent({
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
'relative flex cursor-default select-none space-x-4 py-2 pl-3 pr-9 focus:outline-none',
|
||||
'focus:outline-hidden relative flex cursor-default select-none space-x-4 py-2 pl-3 pr-9',
|
||||
active ? 'bg-indigo-600 text-white' : 'text-gray-900',
|
||||
]"
|
||||
>
|
||||
|
||||
@@ -66,13 +66,13 @@ export default defineComponent({
|
||||
<Combobox
|
||||
as="div"
|
||||
v-model="activePerson"
|
||||
class="w-full overflow-hidden rounded border border-black/5 bg-white bg-clip-padding shadow-sm"
|
||||
class="shadow-xs w-full overflow-hidden rounded-sm border border-black/5 bg-white bg-clip-padding"
|
||||
v-slot="{ activeOption, open }"
|
||||
>
|
||||
<div class="flex w-full flex-col">
|
||||
<ComboboxInput
|
||||
@change="query = $event.target.value"
|
||||
class="w-full rounded-none border-none px-3 py-1 outline-none"
|
||||
class="outline-hidden w-full rounded-none border-none px-3 py-1"
|
||||
placeholder="Search users…"
|
||||
:displayValue="displayValue"
|
||||
/>
|
||||
@@ -83,7 +83,7 @@ export default defineComponent({
|
||||
]"
|
||||
>
|
||||
<ComboboxOptions
|
||||
class="shadow-xs max-h-60 flex-1 overflow-auto py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5"
|
||||
class="shadow-2xs focus:outline-hidden max-h-60 flex-1 overflow-auto py-1 text-base leading-6 sm:text-sm sm:leading-5"
|
||||
>
|
||||
<ComboboxOption
|
||||
v-for="person in people"
|
||||
@@ -93,7 +93,7 @@ export default defineComponent({
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
'relative flex cursor-default select-none space-x-4 py-2 pl-3 pr-9 focus:outline-none',
|
||||
'focus:outline-hidden relative flex cursor-default select-none space-x-4 py-2 pl-3 pr-9',
|
||||
active ? 'bg-indigo-600 text-white' : 'text-gray-900',
|
||||
]"
|
||||
>
|
||||
|
||||
@@ -9,16 +9,16 @@
|
||||
</ComboboxLabel>
|
||||
|
||||
<div class="relative">
|
||||
<span class="inline-block w-full rounded-md shadow-sm">
|
||||
<span class="shadow-xs inline-block w-full rounded-md">
|
||||
<div
|
||||
class="relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-2 pr-10 text-left transition duration-150 ease-in-out focus-within:border-blue-700 focus-within:outline-none focus-within:ring-1 focus-within:ring-blue-700 sm:text-sm sm:leading-5"
|
||||
class="focus-within:outline-hidden relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-2 pr-10 text-left transition duration-150 ease-in-out focus-within:border-blue-700 focus-within:ring-1 focus-within:ring-blue-700 sm:text-sm sm:leading-5"
|
||||
>
|
||||
<span class="block flex flex-wrap gap-2">
|
||||
<span v-if="activePersons.length === 0" class="p-0.5">Empty</span>
|
||||
<span
|
||||
v-for="person in activePersons"
|
||||
:key="person.id"
|
||||
class="flex items-center gap-1 rounded bg-blue-50 px-2 py-0.5"
|
||||
class="flex items-center gap-1 rounded-sm bg-blue-50 px-2 py-0.5"
|
||||
>
|
||||
<span>{{ person.name }}</span>
|
||||
<svg
|
||||
@@ -64,7 +64,7 @@
|
||||
|
||||
<div class="absolute mt-1 w-full rounded-md bg-white shadow-lg">
|
||||
<ComboboxOptions
|
||||
class="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5"
|
||||
class="shadow-2xs focus:outline-hidden max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5"
|
||||
>
|
||||
<ComboboxOption
|
||||
v-for="person in people.filter((person) =>
|
||||
@@ -76,7 +76,7 @@
|
||||
v-slot="{ active, selected }"
|
||||
>
|
||||
<li
|
||||
class="relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none"
|
||||
class="focus:outline-hidden relative cursor-default select-none py-2 pl-3 pr-9"
|
||||
:class="active ? 'bg-indigo-600 text-white' : 'text-gray-900'"
|
||||
>
|
||||
<span
|
||||
@@ -105,7 +105,7 @@
|
||||
</div>
|
||||
</Combobox>
|
||||
<button
|
||||
class="mt-2 inline-flex items-center rounded border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
class="shadow-xs focus:outline-hidden mt-2 inline-flex items-center rounded-sm border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
<div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
|
||||
<div class="sm:flex sm:items-start">
|
||||
<div
|
||||
class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"
|
||||
class="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"
|
||||
>
|
||||
<!-- Heroicon name: exclamation -->
|
||||
<svg
|
||||
@@ -74,7 +74,7 @@
|
||||
<Menu>
|
||||
<MenuButton
|
||||
ref="trigger"
|
||||
class="ui-focus-visible:ring-2 ui-focus-visible:ring-offset-2 flex items-center rounded-md border border-gray-300 bg-white px-2 py-1 ring-gray-500 ring-offset-gray-100 focus:outline-none"
|
||||
class="focus:outline-hidden ui-focus-visible:ring-2 ui-focus-visible:ring-offset-2 flex items-center rounded-md border border-gray-300 bg-white px-2 py-1 ring-gray-500 ring-offset-gray-100"
|
||||
>
|
||||
<span>Choose a reason</span>
|
||||
<svg class="-mr-1 ml-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
@@ -97,7 +97,7 @@
|
||||
<Portal>
|
||||
<MenuItems
|
||||
ref="container"
|
||||
class="z-20 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg outline-none"
|
||||
class="outline-hidden z-20 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg"
|
||||
>
|
||||
<div class="px-4 py-3">
|
||||
<p class="text-sm leading-5">Signed in as</p>
|
||||
|
||||
@@ -8,9 +8,9 @@
|
||||
>
|
||||
|
||||
<div class="relative">
|
||||
<span class="inline-block w-full rounded-md shadow-sm">
|
||||
<span class="shadow-xs inline-block w-full rounded-md">
|
||||
<ListboxButton
|
||||
class="focus:shadow-outline-blue relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out focus:border-blue-300 focus:outline-none sm:text-sm sm:leading-5"
|
||||
class="focus:shadow-outline-blue focus:outline-hidden relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out focus:border-blue-300 sm:text-sm sm:leading-5"
|
||||
>
|
||||
<span class="block truncate">{{ active.name }}</span>
|
||||
<span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
@@ -33,7 +33,7 @@
|
||||
|
||||
<div class="absolute mt-1 w-full rounded-md bg-white shadow-lg">
|
||||
<ListboxOptions
|
||||
class="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5"
|
||||
class="shadow-2xs focus:outline-hidden max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5"
|
||||
>
|
||||
<ListboxOption
|
||||
v-for="person in people"
|
||||
@@ -43,7 +43,7 @@
|
||||
:disabled="person.disabled"
|
||||
>
|
||||
<li
|
||||
class="ui-active:text-white ui-active:bg-indigo-600 ui-not-active:text-gray-900 ui-disabled:bg-gray-50 ui-disabled:text-gray-300 relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none"
|
||||
class="focus:outline-hidden ui-active:bg-indigo-600 ui-active:text-white ui-not-active:text-gray-900 ui-disabled:bg-gray-50 ui-disabled:text-gray-300 relative cursor-default select-none py-2 pl-3 pr-9"
|
||||
>
|
||||
<span
|
||||
class="ui-selected:font-semibold ui-not-selected:font-normal block truncate"
|
||||
|
||||
@@ -9,16 +9,16 @@
|
||||
</ListboxLabel>
|
||||
|
||||
<div class="relative">
|
||||
<span class="inline-block w-full rounded-md shadow-sm">
|
||||
<span class="shadow-xs inline-block w-full rounded-md">
|
||||
<ListboxButton
|
||||
class="focus:shadow-outline-blue relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-2 pr-10 text-left transition duration-150 ease-in-out focus:border-blue-300 focus:outline-none sm:text-sm sm:leading-5"
|
||||
class="focus:shadow-outline-blue focus:outline-hidden relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-2 pr-10 text-left transition duration-150 ease-in-out focus:border-blue-300 sm:text-sm sm:leading-5"
|
||||
>
|
||||
<span class="block flex flex-wrap gap-2">
|
||||
<span v-if="activePersons.length === 0" class="p-0.5">Empty</span>
|
||||
<span
|
||||
v-for="person in activePersons"
|
||||
:key="person.id"
|
||||
class="flex items-center gap-1 rounded bg-blue-50 px-2 py-0.5"
|
||||
class="flex items-center gap-1 rounded-sm bg-blue-50 px-2 py-0.5"
|
||||
>
|
||||
<span>{{ person.name }}</span>
|
||||
<svg
|
||||
@@ -60,7 +60,7 @@
|
||||
|
||||
<div class="absolute mt-1 w-full rounded-md bg-white shadow-lg">
|
||||
<ListboxOptions
|
||||
class="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5"
|
||||
class="shadow-2xs focus:outline-hidden max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5"
|
||||
>
|
||||
<ListboxOption
|
||||
v-for="person in people"
|
||||
@@ -70,7 +70,7 @@
|
||||
v-slot="{ active, selected }"
|
||||
>
|
||||
<li
|
||||
class="relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none"
|
||||
class="focus:outline-hidden relative cursor-default select-none py-2 pl-3 pr-9"
|
||||
:class="active ? 'bg-indigo-600 text-white' : 'text-gray-900'"
|
||||
>
|
||||
<span
|
||||
@@ -99,7 +99,7 @@
|
||||
</div>
|
||||
</Listbox>
|
||||
<button
|
||||
class="mt-2 inline-flex items-center rounded border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
class="shadow-xs focus:outline-hidden mt-2 inline-flex items-center rounded-sm border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
|
||||
@@ -8,9 +8,9 @@
|
||||
>
|
||||
|
||||
<div class="relative">
|
||||
<span class="inline-block w-full rounded-md shadow-sm">
|
||||
<span class="shadow-xs inline-block w-full rounded-md">
|
||||
<ListboxButton
|
||||
class="focus:shadow-outline-blue relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out focus:border-blue-300 focus:outline-none sm:text-sm sm:leading-5"
|
||||
class="focus:shadow-outline-blue focus:outline-hidden relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out focus:border-blue-300 sm:text-sm sm:leading-5"
|
||||
>
|
||||
<span class="block truncate">{{ active.name }}</span>
|
||||
<span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
@@ -33,7 +33,7 @@
|
||||
|
||||
<div class="absolute mt-1 w-full rounded-md bg-white shadow-lg">
|
||||
<ListboxOptions
|
||||
class="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5"
|
||||
class="shadow-2xs focus:outline-hidden max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5"
|
||||
>
|
||||
<ListboxOption
|
||||
v-for="person in people"
|
||||
@@ -76,7 +76,7 @@
|
||||
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium leading-5 text-gray-700"> Email </label>
|
||||
<div class="relative mt-1 rounded-md shadow-sm">
|
||||
<div class="shadow-xs relative mt-1 rounded-md">
|
||||
<input
|
||||
class="form-input block w-full sm:text-sm sm:leading-5"
|
||||
placeholder="you@example.com"
|
||||
@@ -92,9 +92,9 @@
|
||||
>
|
||||
|
||||
<div class="relative">
|
||||
<span class="inline-block w-full rounded-md shadow-sm">
|
||||
<span class="shadow-xs inline-block w-full rounded-md">
|
||||
<ListboxButton
|
||||
class="focus:shadow-outline-blue relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out focus:border-blue-300 focus:outline-none sm:text-sm sm:leading-5"
|
||||
class="focus:shadow-outline-blue focus:outline-hidden relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out focus:border-blue-300 sm:text-sm sm:leading-5"
|
||||
>
|
||||
<span class="block truncate">{{ active.name }}</span>
|
||||
<span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
@@ -117,7 +117,7 @@
|
||||
|
||||
<div class="absolute mt-1 w-full rounded-md bg-white shadow-lg">
|
||||
<ListboxOptions
|
||||
class="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5"
|
||||
class="shadow-2xs focus:outline-hidden max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5"
|
||||
>
|
||||
<ListboxOption
|
||||
v-for="person in people"
|
||||
@@ -198,7 +198,7 @@ export default {
|
||||
classNames,
|
||||
resolveListboxOptionClassName({ active }) {
|
||||
return classNames(
|
||||
'relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none',
|
||||
'relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-hidden',
|
||||
active ? 'text-white bg-indigo-600' : 'text-gray-900'
|
||||
)
|
||||
},
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
<div class="flex h-full w-screen justify-center bg-gray-50 p-12">
|
||||
<div class="mt-64 inline-block text-left">
|
||||
<Menu>
|
||||
<span class="inline-flex rounded-md shadow-sm">
|
||||
<span class="shadow-xs inline-flex rounded-md">
|
||||
<MenuButton
|
||||
ref="reference"
|
||||
class="focus:shadow-outline-blue inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 focus:outline-none active:bg-gray-50 active:text-gray-800"
|
||||
class="focus:shadow-outline-blue focus:outline-hidden inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 active:bg-gray-50 active:text-gray-800"
|
||||
>
|
||||
<span>Options</span>
|
||||
<svg class="-mr-1 ml-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
@@ -22,7 +22,7 @@
|
||||
<MenuItems
|
||||
ref="floating"
|
||||
:style="floatingStyles"
|
||||
class="absolute right-0 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg outline-none"
|
||||
class="outline-hidden absolute right-0 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg"
|
||||
>
|
||||
<div class="px-4 py-3">
|
||||
<p class="text-sm leading-5">Signed in as</p>
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
<div class="flex h-full w-screen justify-center bg-gray-50 p-12">
|
||||
<div class="mt-64 inline-block text-left">
|
||||
<Menu>
|
||||
<span class="inline-flex rounded-md shadow-sm">
|
||||
<span class="shadow-xs inline-flex rounded-md">
|
||||
<MenuButton
|
||||
ref="trigger"
|
||||
class="focus:shadow-outline-blue inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 focus:outline-none active:bg-gray-50 active:text-gray-800"
|
||||
class="focus:shadow-outline-blue focus:outline-hidden inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 active:bg-gray-50 active:text-gray-800"
|
||||
>
|
||||
<span>Options</span>
|
||||
<svg class="-mr-1 ml-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
@@ -21,7 +21,7 @@
|
||||
<teleport to="body">
|
||||
<MenuItems
|
||||
ref="container"
|
||||
class="absolute right-0 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg outline-none"
|
||||
class="outline-hidden absolute right-0 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg"
|
||||
>
|
||||
<div class="px-4 py-3">
|
||||
<p class="text-sm leading-5">Signed in as</p>
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
<div class="flex h-full w-screen justify-center bg-gray-50 p-12">
|
||||
<div class="relative mt-64 inline-block text-left">
|
||||
<Menu>
|
||||
<span class="inline-flex rounded-md shadow-sm">
|
||||
<span class="shadow-xs inline-flex rounded-md">
|
||||
<MenuButton
|
||||
ref="trigger"
|
||||
class="focus:shadow-outline-blue inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 focus:outline-none active:bg-gray-50 active:text-gray-800"
|
||||
class="focus:shadow-outline-blue focus:outline-hidden inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 active:bg-gray-50 active:text-gray-800"
|
||||
>
|
||||
<span>Options</span>
|
||||
<svg class="-mr-1 ml-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
@@ -28,7 +28,7 @@
|
||||
leave-to-class="transform scale-95 opacity-0"
|
||||
>
|
||||
<MenuItems
|
||||
class="w-full divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg outline-none"
|
||||
class="outline-hidden w-full divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg"
|
||||
>
|
||||
<div class="px-4 py-3">
|
||||
<p class="text-sm leading-5">Signed in as</p>
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
<div class="flex h-full w-screen justify-center bg-gray-50 p-12">
|
||||
<div class="relative inline-block text-left">
|
||||
<Menu>
|
||||
<span class="rounded-md shadow-sm">
|
||||
<span class="shadow-xs rounded-md">
|
||||
<MenuButton
|
||||
class="focus:shadow-outline-blue inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 focus:outline-none active:bg-gray-50 active:text-gray-800"
|
||||
class="focus:shadow-outline-blue focus:outline-hidden inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 active:bg-gray-50 active:text-gray-800"
|
||||
>
|
||||
<span>Options</span>
|
||||
<svg class="-mr-1 ml-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
@@ -26,7 +26,7 @@
|
||||
leave-to-class="transform scale-95 opacity-0"
|
||||
>
|
||||
<MenuItems
|
||||
class="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg outline-none"
|
||||
class="outline-hidden absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg"
|
||||
>
|
||||
<div class="px-4 py-3">
|
||||
<p class="text-sm leading-5">Signed in as</p>
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
<div class="flex h-full w-screen justify-center bg-gray-50 p-12">
|
||||
<div class="relative inline-block text-left">
|
||||
<Menu>
|
||||
<span class="rounded-md shadow-sm">
|
||||
<span class="shadow-xs rounded-md">
|
||||
<MenuButton
|
||||
class="focus:shadow-outline-blue inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 focus:outline-none active:bg-gray-50 active:text-gray-800"
|
||||
class="focus:shadow-outline-blue focus:outline-hidden inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 active:bg-gray-50 active:text-gray-800"
|
||||
>
|
||||
<span>Options</span>
|
||||
<svg class="-mr-1 ml-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
@@ -18,7 +18,7 @@
|
||||
</span>
|
||||
|
||||
<MenuItems
|
||||
class="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg outline-none"
|
||||
class="outline-hidden absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg"
|
||||
>
|
||||
<div class="px-4 py-3">
|
||||
<p class="text-sm leading-5">Signed in as</p>
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
<div class="flex h-full w-screen justify-center space-x-4 bg-gray-50 p-12">
|
||||
<div class="relative inline-block text-left">
|
||||
<Menu>
|
||||
<span class="rounded-md shadow-sm">
|
||||
<span class="shadow-xs rounded-md">
|
||||
<MenuButton
|
||||
class="focus:shadow-outline-blue inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 focus:outline-none active:bg-gray-50 active:text-gray-800"
|
||||
class="focus:shadow-outline-blue focus:outline-hidden inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 active:bg-gray-50 active:text-gray-800"
|
||||
>
|
||||
<span>Options</span>
|
||||
<svg class="-mr-1 ml-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
@@ -18,7 +18,7 @@
|
||||
</span>
|
||||
|
||||
<MenuItems
|
||||
class="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg outline-none"
|
||||
class="outline-hidden absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg"
|
||||
>
|
||||
<div class="px-4 py-3">
|
||||
<p class="text-sm leading-5">Signed in as</p>
|
||||
@@ -43,7 +43,7 @@
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="relative rounded-md shadow-sm">
|
||||
<div class="shadow-xs relative rounded-md">
|
||||
<input
|
||||
class="form-input block w-full sm:text-sm sm:leading-5"
|
||||
placeholder="you@example.com"
|
||||
@@ -53,9 +53,9 @@
|
||||
|
||||
<div class="relative inline-block text-left">
|
||||
<Menu>
|
||||
<span class="rounded-md shadow-sm">
|
||||
<span class="shadow-xs rounded-md">
|
||||
<MenuButton
|
||||
class="focus:shadow-outline-blue inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 focus:outline-none active:bg-gray-50 active:text-gray-800"
|
||||
class="focus:shadow-outline-blue focus:outline-hidden inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 active:bg-gray-50 active:text-gray-800"
|
||||
>
|
||||
<span>Options</span>
|
||||
<svg class="-mr-1 ml-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
@@ -69,7 +69,7 @@
|
||||
</span>
|
||||
|
||||
<MenuItems
|
||||
class="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg outline-none"
|
||||
class="outline-hidden absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg"
|
||||
>
|
||||
<div class="px-4 py-3">
|
||||
<p class="text-sm leading-5">Signed in as</p>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
</transition>
|
||||
|
||||
<PopoverButton
|
||||
class="relative z-30 border-2 border-transparent bg-gray-300 px-3 py-2 focus:border-blue-900 focus:outline-none"
|
||||
class="focus:outline-hidden relative z-30 border-2 border-transparent bg-gray-300 px-3 py-2 focus:border-blue-900"
|
||||
>Normal</PopoverButton
|
||||
>
|
||||
<PopoverPanel class="absolute z-30 flex w-64 flex-col border-2 border-blue-900 bg-gray-100">
|
||||
@@ -24,7 +24,7 @@
|
||||
v-for="(link, i) of links"
|
||||
:key="i"
|
||||
:hidden="i === 2"
|
||||
class="border-2 border-transparent px-3 py-2 text-left hover:bg-gray-200 focus:border-blue-900 focus:bg-gray-200 focus:outline-none"
|
||||
class="focus:outline-hidden border-2 border-transparent px-3 py-2 text-left hover:bg-gray-200 focus:border-blue-900 focus:bg-gray-200"
|
||||
>
|
||||
Normal - {{ link }}
|
||||
</button>
|
||||
@@ -33,7 +33,7 @@
|
||||
|
||||
<Popover as="div" class="relative">
|
||||
<PopoverButton
|
||||
class="border-2 border-transparent bg-gray-300 px-3 py-2 focus:border-blue-900 focus:outline-none"
|
||||
class="focus:outline-hidden border-2 border-transparent bg-gray-300 px-3 py-2 focus:border-blue-900"
|
||||
>Focus</PopoverButton
|
||||
>
|
||||
<PopoverPanel
|
||||
@@ -43,7 +43,7 @@
|
||||
<button
|
||||
v-for="(link, i) of links"
|
||||
:key="i"
|
||||
class="border-2 border-transparent px-3 py-2 text-left hover:bg-gray-200 focus:border-blue-900 focus:bg-gray-200 focus:outline-none"
|
||||
class="focus:outline-hidden border-2 border-transparent px-3 py-2 text-left hover:bg-gray-200 focus:border-blue-900 focus:bg-gray-200"
|
||||
>
|
||||
Focus - {{ link }}
|
||||
</button>
|
||||
@@ -53,7 +53,7 @@
|
||||
<Popover as="div" class="relative">
|
||||
<PopoverButton
|
||||
ref="trigger1"
|
||||
class="border-2 border-transparent bg-gray-300 px-3 py-2 focus:border-blue-900 focus:outline-none"
|
||||
class="focus:outline-hidden border-2 border-transparent bg-gray-300 px-3 py-2 focus:border-blue-900"
|
||||
>Portal</PopoverButton
|
||||
>
|
||||
<Portal>
|
||||
@@ -64,7 +64,7 @@
|
||||
<button
|
||||
v-for="(link, i) of links"
|
||||
:key="i"
|
||||
class="border-2 border-transparent px-3 py-2 text-left hover:bg-gray-200 focus:border-blue-900 focus:bg-gray-200 focus:outline-none"
|
||||
class="focus:outline-hidden border-2 border-transparent px-3 py-2 text-left hover:bg-gray-200 focus:border-blue-900 focus:bg-gray-200"
|
||||
>
|
||||
Portal - {{ link }}
|
||||
</button>
|
||||
@@ -75,7 +75,7 @@
|
||||
<Popover as="div" class="relative">
|
||||
<PopoverButton
|
||||
ref="trigger2"
|
||||
class="border-2 border-transparent bg-gray-300 px-3 py-2 focus:border-blue-900 focus:outline-none"
|
||||
class="focus:outline-hidden border-2 border-transparent bg-gray-300 px-3 py-2 focus:border-blue-900"
|
||||
>Focus in portal</PopoverButton
|
||||
>
|
||||
<Portal>
|
||||
@@ -87,7 +87,7 @@
|
||||
<button
|
||||
v-for="(link, i) of links"
|
||||
:key="i"
|
||||
class="border-2 border-transparent px-3 py-2 text-left hover:bg-gray-200 focus:border-blue-900 focus:bg-gray-200 focus:outline-none"
|
||||
class="focus:outline-hidden border-2 border-transparent px-3 py-2 text-left hover:bg-gray-200 focus:border-blue-900 focus:bg-gray-200"
|
||||
>
|
||||
Focus in Portal - {{ link }}
|
||||
</button>
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
access.length - 1 === i && 'rounded-bl-md rounded-br-md',
|
||||
|
||||
// Shared
|
||||
'relative border p-4 flex focus:outline-none',
|
||||
'relative border p-4 flex focus:outline-hidden',
|
||||
active ? 'bg-indigo-50 border-indigo-200 z-10' : 'border-gray-200'
|
||||
)
|
||||
"
|
||||
|
||||
@@ -35,7 +35,7 @@ export default {
|
||||
state,
|
||||
resolveSwitchClass({ checked }) {
|
||||
return classNames(
|
||||
'focus:shadow-outline relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none',
|
||||
'focus:shadow-outline relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-hidden',
|
||||
checked ? 'bg-indigo-600 hover:bg-indigo-800' : 'bg-gray-200 hover:bg-gray-400'
|
||||
)
|
||||
},
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="flex h-full w-screen flex-col items-start space-y-12 bg-gray-50 p-12">
|
||||
<TabGroup class="flex w-full max-w-3xl flex-col" as="div">
|
||||
<TabList class="relative z-0 flex divide-x divide-gray-200 rounded-lg shadow">
|
||||
<TabList class="relative z-0 flex divide-x divide-gray-200 rounded-lg shadow-sm">
|
||||
<Tab
|
||||
v-for="tab in tabs"
|
||||
:key="tab.name"
|
||||
@@ -19,7 +19,7 @@
|
||||
</TabList>
|
||||
|
||||
<TabPanels class="mt-4">
|
||||
<TabPanel v-for="tab in tabs" class="rounded-lg bg-white p-4 shadow" :key="tab.name">
|
||||
<TabPanel v-for="tab in tabs" class="rounded-lg bg-white p-4 shadow-sm" :key="tab.name">
|
||||
{{ tab.content }}
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
</SwitchGroup>
|
||||
|
||||
<TabGroup class="flex w-full max-w-3xl flex-col" as="div" :manual="manual">
|
||||
<TabList class="relative z-0 flex divide-x divide-gray-200 rounded-lg shadow">
|
||||
<TabList class="relative z-0 flex divide-x divide-gray-200 rounded-lg shadow-sm">
|
||||
<Tab
|
||||
v-for="(tab, tabIdx) in tabs"
|
||||
:key="tab.name"
|
||||
@@ -38,7 +38,7 @@
|
||||
</TabList>
|
||||
|
||||
<TabPanels class="mt-4">
|
||||
<TabPanel v-for="tab in tabs" class="rounded-lg bg-white p-4 shadow" key="tab.name">
|
||||
<TabPanel v-for="tab in tabs" class="rounded-lg bg-white p-4 shadow-sm" key="tab.name">
|
||||
{{ tab.content }}
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
@@ -80,7 +80,7 @@ export default {
|
||||
manual,
|
||||
resolveSwitchClass({ checked }) {
|
||||
return classNames(
|
||||
'relative inline-flex flex-shrink-0 h-6 transition-colors duration-200 ease-in-out border-2 border-transparent rounded-full cursor-pointer w-11 focus:outline-none focus:shadow-outline',
|
||||
'relative inline-flex shrink-0 h-6 transition-colors duration-200 ease-in-out border-2 border-transparent rounded-full cursor-pointer w-11 focus:outline-hidden focus:shadow-outline',
|
||||
checked ? 'bg-indigo-600' : 'bg-gray-200'
|
||||
)
|
||||
},
|
||||
|
||||
@@ -3,6 +3,6 @@ import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
import 'tailwindcss/tailwind.css'
|
||||
import './styles.css'
|
||||
|
||||
createApp(App).use(router).mount('#app')
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
@import 'tailwindcss';
|
||||
@plugin '@tailwindcss/forms';
|
||||
@plugin '@tailwindcss/typography';
|
||||
@plugin '@headlessui/tailwindcss';
|
||||
|
||||
/*
|
||||
The default border color has changed to `currentcolor` in Tailwind CSS v4,
|
||||
so we've added these compatibility styles to make sure everything still
|
||||
looks the same as it did with Tailwind CSS v3.
|
||||
|
||||
If we ever want to remove these styles, we need to add an explicit border
|
||||
color utility to any element that depends on these defaults.
|
||||
*/
|
||||
@layer base {
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-gray-200, currentcolor);
|
||||
}
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
/** @type {import('tailwindcss/types').Config} */
|
||||
let config = {
|
||||
content: ['./src/**/*.vue', './*.html'],
|
||||
plugins: [
|
||||
require('@tailwindcss/forms'),
|
||||
require('@tailwindcss/typography'),
|
||||
require('@headlessui/tailwindcss'),
|
||||
],
|
||||
}
|
||||
|
||||
module.exports = config
|
||||
Reference in New Issue
Block a user