Get lots working and looking good
This commit is contained in:
369
src/OAP/Oap.Theme.Svelte/package-lock.json
generated
369
src/OAP/Oap.Theme.Svelte/package-lock.json
generated
@@ -14,9 +14,11 @@
|
||||
"devDependencies": {
|
||||
"@graphql-codegen/cli": "^5.0.2",
|
||||
"@graphql-codegen/client-preset": "^4.2.5",
|
||||
"@parcel/watcher": "^2.4.1",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.2",
|
||||
"@tsconfig/svelte": "^5.0.2",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"concurrently": "^8.2.2",
|
||||
"graphql": "^16.8.1",
|
||||
"postcss": "^8.4.38",
|
||||
"svelte": "^4.2.15",
|
||||
@@ -2524,6 +2526,279 @@
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/@parcel/watcher": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.4.1.tgz",
|
||||
"integrity": "sha512-HNjmfLQEVRZmHRET336f20H/8kOozUGwk7yajvsonjNxbj2wBTK1WsQuHkD5yYh9RxFGL2EyDHryOihOwUoKDA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"detect-libc": "^1.0.3",
|
||||
"is-glob": "^4.0.3",
|
||||
"micromatch": "^4.0.5",
|
||||
"node-addon-api": "^7.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@parcel/watcher-android-arm64": "2.4.1",
|
||||
"@parcel/watcher-darwin-arm64": "2.4.1",
|
||||
"@parcel/watcher-darwin-x64": "2.4.1",
|
||||
"@parcel/watcher-freebsd-x64": "2.4.1",
|
||||
"@parcel/watcher-linux-arm-glibc": "2.4.1",
|
||||
"@parcel/watcher-linux-arm64-glibc": "2.4.1",
|
||||
"@parcel/watcher-linux-arm64-musl": "2.4.1",
|
||||
"@parcel/watcher-linux-x64-glibc": "2.4.1",
|
||||
"@parcel/watcher-linux-x64-musl": "2.4.1",
|
||||
"@parcel/watcher-win32-arm64": "2.4.1",
|
||||
"@parcel/watcher-win32-ia32": "2.4.1",
|
||||
"@parcel/watcher-win32-x64": "2.4.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@parcel/watcher-android-arm64": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.4.1.tgz",
|
||||
"integrity": "sha512-LOi/WTbbh3aTn2RYddrO8pnapixAziFl6SMxHM69r3tvdSm94JtCenaKgk1GRg5FJ5wpMCpHeW+7yqPlvZv7kg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/@parcel/watcher-darwin-arm64": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.4.1.tgz",
|
||||
"integrity": "sha512-ln41eihm5YXIY043vBrrHfn94SIBlqOWmoROhsMVTSXGh0QahKGy77tfEywQ7v3NywyxBBkGIfrWRHm0hsKtzA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/@parcel/watcher-darwin-x64": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.4.1.tgz",
|
||||
"integrity": "sha512-yrw81BRLjjtHyDu7J61oPuSoeYWR3lDElcPGJyOvIXmor6DEo7/G2u1o7I38cwlcoBHQFULqF6nesIX3tsEXMg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/@parcel/watcher-freebsd-x64": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.4.1.tgz",
|
||||
"integrity": "sha512-TJa3Pex/gX3CWIx/Co8k+ykNdDCLx+TuZj3f3h7eOjgpdKM+Mnix37RYsYU4LHhiYJz3DK5nFCCra81p6g050w==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"freebsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/@parcel/watcher-linux-arm-glibc": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.4.1.tgz",
|
||||
"integrity": "sha512-4rVYDlsMEYfa537BRXxJ5UF4ddNwnr2/1O4MHM5PjI9cvV2qymvhwZSFgXqbS8YoTk5i/JR0L0JDs69BUn45YA==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/@parcel/watcher-linux-arm64-glibc": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.4.1.tgz",
|
||||
"integrity": "sha512-BJ7mH985OADVLpbrzCLgrJ3TOpiZggE9FMblfO65PlOCdG++xJpKUJ0Aol74ZUIYfb8WsRlUdgrZxKkz3zXWYA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/@parcel/watcher-linux-arm64-musl": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.4.1.tgz",
|
||||
"integrity": "sha512-p4Xb7JGq3MLgAfYhslU2SjoV9G0kI0Xry0kuxeG/41UfpjHGOhv7UoUDAz/jb1u2elbhazy4rRBL8PegPJFBhA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/@parcel/watcher-linux-x64-glibc": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.4.1.tgz",
|
||||
"integrity": "sha512-s9O3fByZ/2pyYDPoLM6zt92yu6P4E39a03zvO0qCHOTjxmt3GHRMLuRZEWhWLASTMSrrnVNWdVI/+pUElJBBBg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/@parcel/watcher-linux-x64-musl": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.4.1.tgz",
|
||||
"integrity": "sha512-L2nZTYR1myLNST0O632g0Dx9LyMNHrn6TOt76sYxWLdff3cB22/GZX2UPtJnaqQPdCRoszoY5rcOj4oMTtp5fQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/@parcel/watcher-win32-arm64": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.4.1.tgz",
|
||||
"integrity": "sha512-Uq2BPp5GWhrq/lcuItCHoqxjULU1QYEcyjSO5jqqOK8RNFDBQnenMMx4gAl3v8GiWa59E9+uDM7yZ6LxwUIfRg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/@parcel/watcher-win32-ia32": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.4.1.tgz",
|
||||
"integrity": "sha512-maNRit5QQV2kgHFSYwftmPBxiuK5u4DXjbXx7q6eKjq5dsLXZ4FJiVvlcw35QXzk0KrUecJmuVFbj4uV9oYrcw==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/@parcel/watcher-win32-x64": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.4.1.tgz",
|
||||
"integrity": "sha512-+DvS92F9ezicfswqrvIRM2njcYJbd5mb9CUgtrHCHmvn7pPPa+nMDRu1o1bYYz/l5IB2NVGNJWiH7h1E58IF2A==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/@peculiar/asn1-schema": {
|
||||
"version": "2.3.8",
|
||||
"resolved": "https://registry.npmjs.org/@peculiar/asn1-schema/-/asn1-schema-2.3.8.tgz",
|
||||
@@ -3777,6 +4052,48 @@
|
||||
"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/concurrently": {
|
||||
"version": "8.2.2",
|
||||
"resolved": "https://registry.npmjs.org/concurrently/-/concurrently-8.2.2.tgz",
|
||||
"integrity": "sha512-1dP4gpXFhei8IOtlXRE/T/4H88ElHgTiUzh71YUmtjTEHMSRS2Z/fgOxHSxxusGHogsRfxNq1vyAwxSC+EVyDg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"chalk": "^4.1.2",
|
||||
"date-fns": "^2.30.0",
|
||||
"lodash": "^4.17.21",
|
||||
"rxjs": "^7.8.1",
|
||||
"shell-quote": "^1.8.1",
|
||||
"spawn-command": "0.0.2",
|
||||
"supports-color": "^8.1.1",
|
||||
"tree-kill": "^1.2.2",
|
||||
"yargs": "^17.7.2"
|
||||
},
|
||||
"bin": {
|
||||
"conc": "dist/bin/concurrently.js",
|
||||
"concurrently": "dist/bin/concurrently.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^14.13.0 || >=16.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/concurrently/node_modules/supports-color": {
|
||||
"version": "8.1.1",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
|
||||
"integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"has-flag": "^4.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/supports-color?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/constant-case": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz",
|
||||
@@ -3885,6 +4202,22 @@
|
||||
"integrity": "sha512-8YnDaaf7N3k/q5HnTJVuzSyLETjoZjVmHc4AeKAzOvKHEFQKcn64OKBfzHYtE9zGjctNM7V9I0MfnUVLpi7M5g==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/date-fns": {
|
||||
"version": "2.30.0",
|
||||
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
|
||||
"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.21.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.11"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/date-fns"
|
||||
}
|
||||
},
|
||||
"node_modules/debounce": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
|
||||
@@ -3987,6 +4320,18 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/detect-libc": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
|
||||
"integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"detect-libc": "bin/detect-libc.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/didyoumean": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
|
||||
@@ -5678,6 +6023,15 @@
|
||||
"tslib": "^2.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/node-addon-api": {
|
||||
"version": "7.1.0",
|
||||
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.0.tgz",
|
||||
"integrity": "sha512-mNcltoe1R8o7STTegSOHdnJNN7s5EUvhoS7ShnTHDyOSd+8H+UdWODq6qSv67PjC8Zc5JRT8+oLAMCr0SIXw7g==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": "^16 || ^18 || >= 20"
|
||||
}
|
||||
},
|
||||
"node_modules/node-fetch": {
|
||||
"version": "2.7.0",
|
||||
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
|
||||
@@ -6766,6 +7120,12 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/spawn-command": {
|
||||
"version": "0.0.2",
|
||||
"resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2.tgz",
|
||||
"integrity": "sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/sponge-case": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/sponge-case/-/sponge-case-1.0.1.tgz",
|
||||
@@ -7266,6 +7626,15 @@
|
||||
"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/tree-kill": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
|
||||
"integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"tree-kill": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/ts-interface-checker": {
|
||||
"version": "0.1.13",
|
||||
"resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"dev": "concurrently \"vite\" \"npm run codegen --watch\"",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"check": "svelte-check --tsconfig ./tsconfig.json",
|
||||
@@ -13,9 +13,11 @@
|
||||
"devDependencies": {
|
||||
"@graphql-codegen/cli": "^5.0.2",
|
||||
"@graphql-codegen/client-preset": "^4.2.5",
|
||||
"@parcel/watcher": "^2.4.1",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.2",
|
||||
"@tsconfig/svelte": "^5.0.2",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"concurrently": "^8.2.2",
|
||||
"graphql": "^16.8.1",
|
||||
"postcss": "^8.4.38",
|
||||
"svelte": "^4.2.15",
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
<script context="module" lang="ts">
|
||||
import { graphql } from "../gql";
|
||||
|
||||
export const FlowPartFragment = graphql(/* GraphQL */ `
|
||||
fragment FlowPart on FlowPart {
|
||||
widgets {
|
||||
contentType
|
||||
}
|
||||
}
|
||||
`);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { type FragmentType, useFragment } from "../gql";
|
||||
|
||||
export let fragment: FragmentType<typeof FlowPartFragment>;
|
||||
|
||||
const content = useFragment(FlowPartFragment, fragment);
|
||||
const widgets = content.widgets ?? [];
|
||||
</script>
|
||||
|
||||
{#each widgets as widget}
|
||||
<p>a widget: {widget?.contentType}</p>
|
||||
{/each}
|
||||
@@ -12,7 +12,11 @@
|
||||
id
|
||||
}
|
||||
flow {
|
||||
...FlowPart
|
||||
widgets {
|
||||
...LabelPart
|
||||
...ButtonPart
|
||||
...InputPart
|
||||
}
|
||||
}
|
||||
}
|
||||
`);
|
||||
@@ -20,7 +24,10 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { useFragment, type FragmentType } from "../gql";
|
||||
import FlowPart from "./FlowPart.svelte";
|
||||
import ButtonPart from "./ButtonPart.svelte";
|
||||
import InputPart from "./InputPart.svelte";
|
||||
import LabelPart from "./LabelPart.svelte";
|
||||
import SelectPart from "./SelectPart.svelte";
|
||||
|
||||
export let antiForgeryToken: string;
|
||||
export let fragment: FragmentType<typeof FormFragment>;
|
||||
@@ -37,7 +44,25 @@
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
{#if content.flow}
|
||||
<FlowPart fragment={content.flow} />
|
||||
{#each content.flow.widgets ?? [] as widget}
|
||||
{#if widget?.__typename === "Button"}
|
||||
<div class="flex justify-end">
|
||||
<ButtonPart fragment={widget} />
|
||||
</div>
|
||||
{:else if widget?.__typename === "Input"}
|
||||
<div>
|
||||
<InputPart fragment={widget} />
|
||||
</div>
|
||||
{:else if widget?.__typename === "Label"}
|
||||
<div>
|
||||
<LabelPart fragment={widget} />
|
||||
</div>
|
||||
{:else if widget?.__typename === "Select"}
|
||||
<div>
|
||||
<SelectPart fragment={widget} />
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
64
src/OAP/Oap.Theme.Svelte/src/components/InputPart.svelte
Normal file
64
src/OAP/Oap.Theme.Svelte/src/components/InputPart.svelte
Normal file
@@ -0,0 +1,64 @@
|
||||
<script context="module" lang="ts">
|
||||
import { graphql } from "../gql";
|
||||
|
||||
export const InputPartFragment = graphql(/* GraphQL */ `
|
||||
fragment InputPart on Input {
|
||||
input {
|
||||
defaultValue
|
||||
placeholder
|
||||
type
|
||||
}
|
||||
formElementLabel {
|
||||
label
|
||||
}
|
||||
formInputElement {
|
||||
name
|
||||
}
|
||||
formElement {
|
||||
id
|
||||
}
|
||||
explanation {
|
||||
html
|
||||
}
|
||||
}
|
||||
`);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { useFragment, type FragmentType } from "../gql";
|
||||
import ExplanationPart from "./ExplanationPart.svelte";
|
||||
export let fragment: FragmentType<typeof InputPartFragment>;
|
||||
const content = useFragment(InputPartFragment, fragment);
|
||||
|
||||
let cssClasses =
|
||||
"block w-full rounded-md border-0 py-1.5 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600";
|
||||
if (content.input?.type === "number" || content.input?.type === "date") {
|
||||
cssClasses =
|
||||
"block w-1/3 rounded-md border-0 py-1.5 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600";
|
||||
}
|
||||
|
||||
let checked = false;
|
||||
let value = content.input?.defaultValue ?? "";
|
||||
</script>
|
||||
|
||||
{#if content.formElementLabel?.label}
|
||||
<label
|
||||
for={content.formElement?.id}
|
||||
class="block mt-2 font-bold text-gray-900"
|
||||
>
|
||||
{content.formElementLabel.label}
|
||||
</label>
|
||||
{/if}
|
||||
|
||||
{#if content.explanation?.html}
|
||||
<ExplanationPart fragment={content.explanation}/>
|
||||
{/if}
|
||||
|
||||
<input
|
||||
id={content.formElement?.id}
|
||||
name={content.formInputElement?.name}
|
||||
type={content.input?.type}
|
||||
class={cssClasses}
|
||||
{value}
|
||||
placeholder={content.input?.placeholder}
|
||||
/>
|
||||
@@ -3,12 +3,15 @@
|
||||
|
||||
export const OapApplicationFormStepFragment = graphql(/* GraphQL */ `
|
||||
fragment OapApplicationFormStep on OapApplicationFormStep {
|
||||
displayText
|
||||
contentItemId
|
||||
htmlBody {
|
||||
...RichText
|
||||
}
|
||||
flow {
|
||||
...FlowPart
|
||||
widgets {
|
||||
...Form
|
||||
}
|
||||
}
|
||||
}
|
||||
`);
|
||||
@@ -18,21 +21,25 @@
|
||||
import { type FragmentType, useFragment } from "../gql";
|
||||
|
||||
import RichText from "./RichText.svelte";
|
||||
import FlowPart from "./FlowPart.svelte";
|
||||
import Form from "./Form.svelte";
|
||||
|
||||
export let fragment: FragmentType<typeof OapApplicationFormStepFragment>;
|
||||
|
||||
const content = useFragment(OapApplicationFormStepFragment, fragment);
|
||||
</script>
|
||||
|
||||
<h2 class="text-lg font-bold">{content.contentItemId}</h2>
|
||||
<h2 class="text-lg font-bold">{content.displayText}</h2>
|
||||
|
||||
{#if content.htmlBody}
|
||||
<div class="mt-2 mb-6">
|
||||
<RichText fragment={content.htmlBody} />
|
||||
</div>
|
||||
<div class="mt-2 mb-6">
|
||||
<RichText fragment={content.htmlBody} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if content.flow}
|
||||
<FlowPart fragment={content.flow} />
|
||||
{#each content.flow.widgets as widget}
|
||||
{#if widget?.__typename === "Form"}
|
||||
<Form antiForgeryToken="" fragment={widget} />
|
||||
{/if}
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
@@ -17,5 +17,5 @@
|
||||
</script>
|
||||
|
||||
<div class="richtext">
|
||||
{content.html}
|
||||
{@html content.html}
|
||||
</div>
|
||||
|
||||
76
src/OAP/Oap.Theme.Svelte/src/components/SelectPart.svelte
Normal file
76
src/OAP/Oap.Theme.Svelte/src/components/SelectPart.svelte
Normal file
@@ -0,0 +1,76 @@
|
||||
<script context="module" lang="ts">
|
||||
import { graphql } from "../gql";
|
||||
|
||||
export const SelectPartFragment = graphql(/* GraphQL */ `
|
||||
fragment SelectPart on Select {
|
||||
formElementLabel {
|
||||
label
|
||||
}
|
||||
formInputElement {
|
||||
name
|
||||
}
|
||||
formElement {
|
||||
id
|
||||
}
|
||||
explanation {
|
||||
html
|
||||
}
|
||||
}
|
||||
`);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { useFragment, type FragmentType } from "../gql";
|
||||
export let fragment: FragmentType<typeof SelectPartFragment>;
|
||||
const content = useFragment(SelectPartFragment, fragment);
|
||||
|
||||
let cssClasses =
|
||||
"block w-full rounded-md border-0 py-1.5 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600";
|
||||
|
||||
</script>
|
||||
|
||||
{#if content.formElementLabel?.label}
|
||||
<label
|
||||
for={content.formElement?.id}
|
||||
class="block mt-2 font-bold text-gray-900"
|
||||
>
|
||||
{content.formElementLabel.label}
|
||||
</label>
|
||||
{/if}
|
||||
|
||||
{#if content.explanation?.html}
|
||||
<ExplanationPart fragment={content.explanation}/>
|
||||
{/if}
|
||||
|
||||
|
||||
@if (Model.Value.Editor == SelectEditorOption.Checkbox || Model.Value.Editor == SelectEditorOption.Radio)
|
||||
{
|
||||
int i = 0;
|
||||
var htmlType = Model.Value.Editor == SelectEditorOption.Checkbox ? "checkbox" : "radio";
|
||||
<div class="mt-2 space-y-2">
|
||||
@foreach (var option in Model.Value.Options)
|
||||
{
|
||||
<div class="flex items-center gap-x-3">
|
||||
<input type="@htmlType" id="@(fieldId + "_" + i)" name="@fieldName"
|
||||
class="@validationClass h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
|
||||
value="@option.Value" @(option.Value == fieldValue ? "checked='checked'" : "") />
|
||||
<label class="block text-sm font-medium text-gray-900" for="@(fieldId + "_" + i)">@option.Text</label>
|
||||
</div>
|
||||
i++;
|
||||
}
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="mt-2">
|
||||
<select id="@fieldId" name="@fieldName"
|
||||
class="@validationClass block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6">
|
||||
@foreach (var option in Model.Value.Options)
|
||||
{
|
||||
var optionValue = !string.IsNullOrWhiteSpace(option.Value) ? option.Value : option.Text;
|
||||
var isOptionSelected = optionValue == fieldValue;
|
||||
<option value="@optionValue" selected="@isOptionSelected">@option.Text</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
}
|
||||
@@ -15,11 +15,12 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
|
||||
const documents = {
|
||||
"\n\t\tquery OapApplicationForm($contentItemId: ID!) {\n\t\t\toapApplicationForm(where: { contentItemId: $contentItemId }) {\n\t\t\t\tdisplayText\n\t\t\t\tcontentItemId\n\t\t\t\tlist {\n\t\t\t\t\tcontentItems {\n\t\t\t\t\t\t__typename\n\t\t\t\t\t\t...OapApplicationFormStep\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t": types.OapApplicationFormDocument,
|
||||
"\n fragment ButtonPart on Button {\n button {\n type\n text\n }\n formInputElement {\n name\n }\n formElement {\n id\n }\n }\n ": types.ButtonPartFragmentDoc,
|
||||
"\n fragment FlowPart on FlowPart {\n widgets {\n contentType\n }\n }\n ": types.FlowPartFragmentDoc,
|
||||
"\n\t\tfragment Form on Form {\n\t\t\tdisplayText\n\t\t\tform {\n\t\t\t\taction\n\t\t\t\tmethod\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tflow {\n\t\t\t\t...FlowPart\n\t\t\t}\n\t\t}\n\t": types.FormFragmentDoc,
|
||||
"\n\t\tfragment Form on Form {\n\t\t\tdisplayText\n\t\t\tform {\n\t\t\t\taction\n\t\t\t\tmethod\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tflow {\n\t\t\t\twidgets {\n\t\t\t\t\t...LabelPart\n\t\t\t\t\t...ButtonPart\n\t\t\t\t\t...InputPart\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t": types.FormFragmentDoc,
|
||||
"\n\t\tfragment InputPart on Input {\n\t\t\tinput {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t\ttype\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\thtml\n\t\t\t}\n\t\t}\n\t": types.InputPartFragmentDoc,
|
||||
"\n\t\tfragment LabelPart on Label {\n\t\t\tdisplayText\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tlabel {\n\t\t\t\tfor\n\t\t\t\tvalue\n\t\t\t}\n\t\t\tcontentType\n\t\t}\n\t": types.LabelPartFragmentDoc,
|
||||
"\n\t\tfragment OapApplicationFormStep on OapApplicationFormStep {\n\t\t\tcontentItemId\n\t\t\thtmlBody {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tflow {\n\t\t\t\t...FlowPart\n\t\t\t}\n\t\t}\n\t": types.OapApplicationFormStepFragmentDoc,
|
||||
"\n\t\tfragment OapApplicationFormStep on OapApplicationFormStep {\n\t\t\tdisplayText\n\t\t\tcontentItemId\n\t\t\thtmlBody {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tflow {\n\t\t\t\twidgets {\n\t\t\t\t\t...Form\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t": types.OapApplicationFormStepFragmentDoc,
|
||||
"\n\t\tfragment RichText on HtmlBodyPart {\n\t\t\thtml\n\t\t}\n\t": types.RichTextFragmentDoc,
|
||||
"\n\t\tfragment SelectPart on Select {\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\thtml\n\t\t\t}\n\t\t}\n\t": types.SelectPartFragmentDoc,
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -47,11 +48,11 @@ export function graphql(source: "\n fragment ButtonPart on Button {\n
|
||||
/**
|
||||
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
||||
*/
|
||||
export function graphql(source: "\n fragment FlowPart on FlowPart {\n widgets {\n contentType\n }\n }\n "): (typeof documents)["\n fragment FlowPart on FlowPart {\n widgets {\n contentType\n }\n }\n "];
|
||||
export function graphql(source: "\n\t\tfragment Form on Form {\n\t\t\tdisplayText\n\t\t\tform {\n\t\t\t\taction\n\t\t\t\tmethod\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tflow {\n\t\t\t\twidgets {\n\t\t\t\t\t...LabelPart\n\t\t\t\t\t...ButtonPart\n\t\t\t\t\t...InputPart\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment Form on Form {\n\t\t\tdisplayText\n\t\t\tform {\n\t\t\t\taction\n\t\t\t\tmethod\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tflow {\n\t\t\t\twidgets {\n\t\t\t\t\t...LabelPart\n\t\t\t\t\t...ButtonPart\n\t\t\t\t\t...InputPart\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"];
|
||||
/**
|
||||
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
||||
*/
|
||||
export function graphql(source: "\n\t\tfragment Form on Form {\n\t\t\tdisplayText\n\t\t\tform {\n\t\t\t\taction\n\t\t\t\tmethod\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tflow {\n\t\t\t\t...FlowPart\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment Form on Form {\n\t\t\tdisplayText\n\t\t\tform {\n\t\t\t\taction\n\t\t\t\tmethod\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tflow {\n\t\t\t\t...FlowPart\n\t\t\t}\n\t\t}\n\t"];
|
||||
export function graphql(source: "\n\t\tfragment InputPart on Input {\n\t\t\tinput {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t\ttype\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\thtml\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment InputPart on Input {\n\t\t\tinput {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t\ttype\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\thtml\n\t\t\t}\n\t\t}\n\t"];
|
||||
/**
|
||||
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
||||
*/
|
||||
@@ -59,11 +60,15 @@ export function graphql(source: "\n\t\tfragment LabelPart on Label {\n\t\t\tdisp
|
||||
/**
|
||||
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
||||
*/
|
||||
export function graphql(source: "\n\t\tfragment OapApplicationFormStep on OapApplicationFormStep {\n\t\t\tcontentItemId\n\t\t\thtmlBody {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tflow {\n\t\t\t\t...FlowPart\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment OapApplicationFormStep on OapApplicationFormStep {\n\t\t\tcontentItemId\n\t\t\thtmlBody {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tflow {\n\t\t\t\t...FlowPart\n\t\t\t}\n\t\t}\n\t"];
|
||||
export function graphql(source: "\n\t\tfragment OapApplicationFormStep on OapApplicationFormStep {\n\t\t\tdisplayText\n\t\t\tcontentItemId\n\t\t\thtmlBody {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tflow {\n\t\t\t\twidgets {\n\t\t\t\t\t...Form\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment OapApplicationFormStep on OapApplicationFormStep {\n\t\t\tdisplayText\n\t\t\tcontentItemId\n\t\t\thtmlBody {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tflow {\n\t\t\t\twidgets {\n\t\t\t\t\t...Form\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"];
|
||||
/**
|
||||
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
||||
*/
|
||||
export function graphql(source: "\n\t\tfragment RichText on HtmlBodyPart {\n\t\t\thtml\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment RichText on HtmlBodyPart {\n\t\t\thtml\n\t\t}\n\t"];
|
||||
/**
|
||||
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
||||
*/
|
||||
export function graphql(source: "\n\t\tfragment SelectPart on Select {\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\thtml\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment SelectPart on Select {\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\thtml\n\t\t\t}\n\t\t}\n\t"];
|
||||
|
||||
export function graphql(source: string) {
|
||||
return (documents as any)[source] ?? {};
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,15 @@
|
||||
using GraphQL.Types;
|
||||
using OrchardCore.Forms.Models;
|
||||
|
||||
namespace OrchardCore.Forms.GraphQL
|
||||
{
|
||||
public class FormElementLabelPartQueryObjectType : ObjectGraphType<FormElementLabelPart>
|
||||
{
|
||||
public FormElementLabelPartQueryObjectType()
|
||||
{
|
||||
Name = "FormElementLabelPart";
|
||||
|
||||
Field(x => x.Label, nullable: true);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,14 +1,18 @@
|
||||
using Microsoft.Extensions.DependencyInjection;
|
||||
using Microsoft.Extensions.Options;
|
||||
using OrchardCore.Modules;
|
||||
using OrchardCore.ResourceManagement;
|
||||
|
||||
namespace Oap.Theme;
|
||||
|
||||
public class Startup : StartupBase
|
||||
{
|
||||
public override void ConfigureServices(IServiceCollection services)
|
||||
{
|
||||
services.AddTransient<IConfigureOptions<ResourceManagementOptions>, ResourceManagementOptionsConfiguration>();
|
||||
}
|
||||
}
|
||||
using Microsoft.Extensions.DependencyInjection;
|
||||
using Microsoft.Extensions.Options;
|
||||
using OrchardCore.Apis;
|
||||
using OrchardCore.Forms.GraphQL;
|
||||
using OrchardCore.Forms.Models;
|
||||
using OrchardCore.Modules;
|
||||
using OrchardCore.ResourceManagement;
|
||||
|
||||
namespace Oap.Theme;
|
||||
|
||||
public class Startup : StartupBase
|
||||
{
|
||||
public override void ConfigureServices(IServiceCollection services)
|
||||
{
|
||||
services.AddTransient<IConfigureOptions<ResourceManagementOptions>, ResourceManagementOptionsConfiguration>();
|
||||
services.AddObjectGraphType<FormElementLabelPart, FormElementLabelPartQueryObjectType>();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
@using OrchardCore.Forms.ViewModels
|
||||
@using OrchardCore.Forms.Models
|
||||
@model ShapeViewModel<FormElementLabelPart>
|
||||
@{
|
||||
var formElementPart = Model.Value.ContentItem.As<FormElementPart>();
|
||||
var formInputElementPart = Model.Value.ContentItem.As<FormInputElementPart>();
|
||||
var elementId = formElementPart.Id;
|
||||
var fieldName = formInputElementPart.Name;
|
||||
var fieldId = !string.IsNullOrEmpty(elementId) ? elementId : !string.IsNullOrEmpty(fieldName) ? Html.GenerateIdFromName(fieldName) : default(string);
|
||||
}
|
||||
|
||||
@if (Model.Value.Option == LabelOptions.Standard)
|
||||
{
|
||||
<label for="@fieldId" class="block mt-2 font-bold text-gray-900">@Model.Value.Label</label>
|
||||
}
|
||||
else if (Model.Value.Option == LabelOptions.ScreenReaders)
|
||||
{
|
||||
<label for="@fieldId" class="sr-only">@Model.Value.Label</label>
|
||||
}
|
||||
@using OrchardCore.Forms.ViewModels
|
||||
@using OrchardCore.Forms.Models
|
||||
@model ShapeViewModel<FormElementLabelPart>
|
||||
@{
|
||||
var formElementPart = Model.Value.ContentItem.As<FormElementPart>();
|
||||
var formInputElementPart = Model.Value.ContentItem.As<FormInputElementPart>();
|
||||
var elementId = formElementPart.Id;
|
||||
var fieldName = formInputElementPart.Name;
|
||||
var fieldId = !string.IsNullOrEmpty(elementId) ? elementId : !string.IsNullOrEmpty(fieldName) ? Html.GenerateIdFromName(fieldName) : default(string);
|
||||
}
|
||||
|
||||
@if (Model.Value.Option == LabelOptions.Standard)
|
||||
{
|
||||
<label for="@fieldId" class="block mt-2 font-bold text-gray-900">@Model.Value.Label</label>
|
||||
}
|
||||
else if (Model.Value.Option == LabelOptions.ScreenReaders)
|
||||
{
|
||||
<label for="@fieldId" class="sr-only">@Model.Value.Label</label>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user