holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adding carbon lit components tutorial

Browse Source 
https://github.com/carbon-design-system/carbon-web-components#basic-usage
Thought Rollup gives following Babel error:
Error: Could not load /Volumes/htdocs/egw-test/node_modules/carbon-web-components/es/components/dropdown/@babel/runtime/helpers/esm/decorate.js (imported by node_modules/carbon-web-components/es/components/dropdown/dropdown-item.js): ENOENT: no such file or directory, open '/Volumes/htdocs/egw-test/node_modules/carbon-web-components/es/components/dropdown/@babel/runtime/helpers/esm/decorate.js'
This commit is contained in:
Ralf Becker 2021-07-06 09:53:18 +02:00
parent e474333bc8
commit d11cb4bb7e
5 changed files with 2281 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
lit/index.html Normal file
View File

@ -0,0 +1,47 @@
<!--
@license
Copyright IBM Corp. 2019
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<html>
<head>
<title>carbon-web-components example</title>
<meta charset="UTF-8" />
<style type="text/css">
body {
font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
}
#app {
width: 300px;
}
bx-dropdown,
bx-dropdown-item {
visibility: hidden;
}
bx-dropdown:defined,
bx-dropdown-item:defined {
visibility: inherit;
}
</style>
</head>
<body>
<h1>Hello World! 👋</h1>
<div id="app">
<bx-dropdown trigger-content="Select an item">
<bx-dropdown-item value="all">Option 1</bx-dropdown-item>
<bx-dropdown-item value="cloudFoundry">Option 2</bx-dropdown-item>
<bx-dropdown-item value="staging">Option 3</bx-dropdown-item>
<bx-dropdown-item value="dea">Option 4</bx-dropdown-item>
<bx-dropdown-item value="router">Option 5</bx-dropdown-item>
</bx-dropdown>
</div>
<script type="module" src="js/app.min.js"></script>
</body>
</html>

11
lit/js/app.js Normal file
View File

@ -0,0 +1,11 @@
/**
* @license
*
* Copyright IBM Corp. 2020
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import 'carbon-web-components/es/components/dropdown/dropdown.js';
import 'carbon-web-components/es/components/dropdown/dropdown-item.js';

2421
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@ -12,6 +12,7 @@
"@babel/core": "^7.14.6", "@babel/core": "^7.14.6",
"@babel/preset-typescript": "^7.14.5", "@babel/preset-typescript": "^7.14.5",
"@rollup/plugin-babel": "^5.3.0", "@rollup/plugin-babel": "^5.3.0",
"@rollup/plugin-node-resolve": "^13.0.0",
"@rollup/plugin-typescript": "^8.2.1", "@rollup/plugin-typescript": "^8.2.1",
"@types/jquery": "^3.5.5", "@types/jquery": "^3.5.5",
"@types/jqueryui": "^1.12.14", "@types/jqueryui": "^1.12.14",
@ -42,5 +43,11 @@
"egw": true, "egw": true,
"app": true "app": true
} }
},
"dependencies": {
"carbon-components": "^10.37.0",
"carbon-web-components": "^1.14.1",
"lit-element": "^2.5.1",
"lit-html": "^1.4.1"
} }
} }

6
rollup.config.js
View File

@ -15,6 +15,7 @@ import { readFileSync } from "fs";
import rimraf from 'rimraf'; import rimraf from 'rimraf';
import { minify } from 'terser'; import { minify } from 'terser';
import { readdir,stat } from 'fs/promises'; import { readdir,stat } from 'fs/promises';
import resolve from '@rollup/plugin-node-resolve';
// Best practice: use this // Best practice: use this
//rimraf.sync('./dist/'); //rimraf.sync('./dist/');
@ -80,7 +81,10 @@ const config = {
return tsPath; return tsPath;
} }
} }
}, { },
// resolve (external) node modules from node_modules directory
//resolve(),
{
transform (code, id) { transform (code, id) {
if (id.endsWith('.ts')) if (id.endsWith('.ts'))
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {