@ui5/create-webcomponents-package 0.0.0-c0e494b02 → 0.0.0-c41f1b293

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/create-package.js +9 -1
  2. package/package.json +1 -1
  3. package/template/config/vite.config.js +4 -0
  4. package/template/src/MyFirstComponent.hbs +1 -1
  5. package/template/src/MyFirstComponent.js +17 -4
  6. package/template/src/MyFirstComponent.ts +17 -3
  7. package/template/src/i18n/messagebundle.properties +3 -2
  8. package/template/src/i18n/messagebundle_de.properties +1 -1
  9. package/template/src/i18n/messagebundle_en.properties +1 -1
  10. package/template/src/i18n/messagebundle_es.properties +1 -1
  11. package/template/src/i18n/messagebundle_fr.properties +1 -1
  12. package/template/src/themes/MyFirstComponent.css +10 -9
  13. package/template/src/themes/sap_fiori_3/parameters-bundle.css +1 -1
  14. package/template/src/themes/sap_horizon_dark/parameters-bundle.css +1 -1
  15. package/template/test/pages/css/index.css +36 -0
  16. package/template/test/pages/img/logo.png +0 -0
  17. package/template/test/pages/index.html +36 -32
  18. package/template/test/specs/Demo.spec.js +0 -1
  19. package/template/src/themes/sap_fiori_3_dark/parameters-bundle.css +0 -3
  20. package/template/src/themes/sap_fiori_3_hcb/parameters-bundle.css +0 -3
  21. package/template/src/themes/sap_fiori_3_hcw/parameters-bundle.css +0 -3
package/create-package.js CHANGED
@@ -25,6 +25,9 @@ const isJSRelatedFile = sourcePath => {
25
25
  const isGitIgnore = sourcePath => {
26
26
  return sourcePath.includes("gitignore");
27
27
  };
28
+ const isLogo = sourcePath => {
29
+ return sourcePath.includes("logo");
30
+ };
28
31
  const isNPMRC = sourcePath => {
29
32
  return sourcePath.includes("npmrc");
30
33
  };
@@ -69,6 +72,11 @@ const copyFile = (vars, sourcePath, destPath) => {
69
72
  return;
70
73
  }
71
74
 
75
+ if (isLogo) {
76
+ fs.copyFileSync(sourcePath, destPath);
77
+ return;
78
+ }
79
+
72
80
  let content = fs.readFileSync(sourcePath, { encoding: "UTF-8" });
73
81
  content = replaceVarsInFileContent(vars, content);
74
82
  destPath = replaceVarsInFileName(vars, destPath);
@@ -113,7 +121,7 @@ const generateFilesContent = (packageName, componentName, namespace, typescript,
113
121
  };
114
122
 
115
123
  const packageContent = {
116
- packageName,
124
+ name: packageName,
117
125
  version: "0.0.1",
118
126
  ui5: {
119
127
  webComponentsPackage: true,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ui5/create-webcomponents-package",
3
- "version": "0.0.0-c0e494b02",
3
+ "version": "0.0.0-c41f1b293",
4
4
  "description": "UI5 Web Components: create package",
5
5
  "author": "SAP SE (https://www.sap.com)",
6
6
  "license": "Apache-2.0",
package/template/config/vite.config.js ADDED
@@ -0,0 +1,4 @@
1
+ // vite.config.js
2
+ const config = require("@ui5/webcomponents-tools/components-package/vite.config.js"); // eslint-disable-line
3
+ config.server = { open: "/test/pages/index.html" };
4
+ module.exports = config;
package/template/src/MyFirstComponent.hbs CHANGED
@@ -1 +1 @@
1
- <div>This is: INIT_PACKAGE_VAR_TAG. {{pleaseWaitText}}</div>
1
+ <div @click="{{onClick}}">{{counterText}} :: {{counter}}</div>
package/template/src/MyFirstComponent.js CHANGED
@@ -8,14 +8,23 @@ import INIT_PACKAGE_VAR_CLASS_NAMETemplate from "./generated/templates/INIT_PACK
8
8
  // Styles
9
9
  import INIT_PACKAGE_VAR_CLASS_NAMECss from "./generated/themes/INIT_PACKAGE_VAR_CLASS_NAME.css.js";
10
10
 
11
- import { PLEASE_WAIT } from "./generated/i18n/i18n-defaults.js";
11
+ import { COUNTER } from "./generated/i18n/i18n-defaults.js";
12
12
 
13
13
  /**
14
14
  * @public
15
15
  */
16
16
  const metadata = {
17
17
  tag: "INIT_PACKAGE_VAR_TAG",
18
- properties: {
18
+ properties: /** @lends INIT_PACKAGE_VAR_NAMESPACE.INIT_PACKAGE_VAR_CLASS_NAME.prototype */ {
19
+ /**
20
+ * Defines the counter of the component.
21
+ * @type { number }
22
+ * @defaultvalue 0
23
+ * @public
24
+ */
25
+ counter: {
26
+ defaultValue: 0,
27
+ },
19
28
  },
20
29
  slots: {
21
30
  },
@@ -57,8 +66,12 @@ class INIT_PACKAGE_VAR_CLASS_NAME extends UI5Element {
57
66
  INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle = await getI18nBundle("INIT_PACKAGE_VAR_NAME");
58
67
  }
59
68
 
60
- get pleaseWaitText() {
61
- return INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle.getText(PLEASE_WAIT);
69
+ onClick() {
70
+ this.counter++;
71
+ }
72
+
73
+ get counterText() {
74
+ return INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle.getText(COUNTER);
62
75
  }
63
76
  }
64
77
 
package/template/src/MyFirstComponent.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
2
2
  import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
3
+ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
3
4
  import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
4
5
  import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
5
6
  import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -10,7 +11,7 @@ import INIT_PACKAGE_VAR_CLASS_NAMETemplate from "./generated/templates/INIT_PACK
10
11
  // Styles
11
12
  import INIT_PACKAGE_VAR_CLASS_NAMECss from "./generated/themes/INIT_PACKAGE_VAR_CLASS_NAME.css.js";
12
13
 
13
- import { PLEASE_WAIT } from "./generated/i18n/i18n-defaults.js";
14
+ import { COUNTER } from "./generated/i18n/i18n-defaults.js";
14
15
 
15
16
  /**
16
17
  * @class
@@ -38,8 +39,21 @@ class INIT_PACKAGE_VAR_CLASS_NAME extends UI5Element {
38
39
  INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle = await getI18nBundle("INIT_PACKAGE_VAR_NAME");
39
40
  }
40
41
 
41
- get pleaseWaitText() {
42
- return INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle.getText(PLEASE_WAIT);
42
+ /**
43
+ * Defines the component counter.
44
+ * @name NIT_PACKAGE_VAR_NAMESPACE.INIT_PACKAGE_VAR_CLASS_NAME.prototype.counter
45
+ * @public
46
+ * @type { number }
47
+ */
48
+ @property({ defaultValue: 0 })
49
+ counter!: number;
50
+
51
+ onClick() {
52
+ this.counter++;
53
+ }
54
+
55
+ get counterText() {
56
+ return INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle.getText(COUNTER);
43
57
  }
44
58
  }
45
59
 
package/template/src/i18n/messagebundle.properties CHANGED
@@ -1,2 +1,3 @@
1
- #please wait text for the sample component
2
- PLEASE_WAIT=wait
1
+ # the "counter" text for the sample component
2
+ COUNTER=Counter
3
+
package/template/src/i18n/messagebundle_de.properties CHANGED
@@ -1 +1 @@
1
- PLEASE_WAIT=Bitte warten
1
+ COUNTER=Schalter
package/template/src/i18n/messagebundle_en.properties CHANGED
@@ -1 +1 @@
1
- PLEASE_WAIT=Please wait
1
+ COUNTER=Counter
package/template/src/i18n/messagebundle_es.properties CHANGED
@@ -1 +1 @@
1
- PLEASE_WAIT=Espere
1
+ COUNTER=Encimera
package/template/src/i18n/messagebundle_fr.properties CHANGED
@@ -1 +1 @@
1
- PLEASE_WAIT=Patientez.
1
+ COUNTER=Comptoir
package/template/src/themes/MyFirstComponent.css CHANGED
@@ -1,11 +1,12 @@
1
1
  :host {
2
- border: 2px solid var(--my-component-border-color);
3
- background-color: var(--sapBackgroundColor);
4
- color: var(--sapTextColor);
5
- display: block;
6
- width: 24rem;
7
- height: 3rem;
8
- text-align: center;
9
- vertical-align: middle;
10
- line-height: 3rem;
2
+ padding: 0 2rem;
3
+ color: var(--sapAvatar_6_TextColor);
4
+ background-color: var(--sapAvatar_6_Background);
5
+ border: 2px solid var(--my-component-border-color);
6
+ border-radius: 0.5rem;
7
+ box-shadow: var(--sapContent_Shadow0);
8
+ text-align: center;
9
+ line-height: 3rem;
10
+ font-size: 1.25rem;
11
+ user-select: none;
11
12
  }
package/template/src/themes/sap_fiori_3/parameters-bundle.css CHANGED
@@ -1,3 +1,3 @@
1
1
  :root {
2
- --my-component-border-color: green;
2
+ --my-component-border-color: blue;
3
3
  }
package/template/src/themes/sap_horizon_dark/parameters-bundle.css CHANGED
@@ -1,3 +1,3 @@
1
1
  :root {
2
- --my-component-border-color: blue;
2
+ --my-component-border-color: darkblue;
3
3
  }
package/template/test/pages/css/index.css ADDED
@@ -0,0 +1,36 @@
1
+ body {
2
+ color: var(--sapTextColor);
3
+ background-color: var(--sapBackgroundColor);
4
+ font-size: var(--sapFontSize);
5
+ font-family: var(--sapFontFamily);
6
+ }
7
+
8
+ h1 {
9
+ font-size: var(--sapFontHeader2Size);
10
+ margin-bottom: 0.5rem;
11
+ }
12
+
13
+ h2 {
14
+ font-size: var(--sapFontHeader3Size);
15
+ margin-bottom: 0.5rem;
16
+ }
17
+
18
+ .app, .app-first-component, .app-settings, .app-docs {
19
+ display: flex;
20
+ align-items: center;
21
+ justify-content: center;
22
+ flex-direction: column;
23
+ }
24
+
25
+ .app-first-component {
26
+ margin-bottom: 3rem;
27
+ }
28
+
29
+ .app-docs {
30
+ margin-top: 3rem;
31
+ }
32
+
33
+ a {
34
+ margin: 0.25rem;
35
+ color: var(--sapLinkColor);
36
+ }
package/template/test/pages/img/logo.png ADDED
Binary file
package/template/test/pages/index.html CHANGED
@@ -10,44 +10,48 @@
10
10
 
11
11
  <script data-ui5-config type="application/json">
12
12
  {
13
+ "theme": "sap_horizon_dark",
13
14
  "language": "EN"
14
15
  }
15
16
  </script>
16
-
17
+
18
+ <link rel="stylesheet" type="text/css" href="./css/index.css">
17
19
  <script src="../../bundle.esm.js" type="module"></script>
18
-
19
- <style>
20
- code { color: blue; font-size: small; }
21
- </style>
22
-
23
20
  </head>
24
21
 
25
22
  <body>
26
- <ul>
27
- <li><a href="?sap-ui-theme=sap_fiori_3">Fiori 3</a></li>
28
- <li><a href="?sap-ui-theme=sap_fiori_3_dark">Fiori 3 Dark</a></li>
29
- <li><a href="?sap-ui-theme=sap_fiori_3_hcb">Fiori 3 High Contrast Black</a></li>
30
- <li><a href="?sap-ui-theme=sap_fiori_3_hcw">Fiori 3 High Contrast White</a></li>
31
- <li><a href="?sap-ui-theme=sap_horizon">Horizon</a></li>
32
- <li><a href="?sap-ui-theme=sap_horizon_dark">Horizon Dark</a></li>
33
- <li><a href="?sap-ui-theme=sap_horizon_hcb">Horizon High Contrast Black</a></li>
34
- <li><a href="?sap-ui-theme=sap_horizon_hcw">Horizon High Contrast White</a></li>
35
- </ul>
36
- <br>
37
- <span>or in the browser console, for example:</span>
38
- <code>window['sap-ui-webcomponents-bundle'].configuration.setTheme("sap_horizon_hcb")</code>
39
-
40
- <br><br>
41
-
42
- <a href="?sap-ui-language=en">English</a> |
43
- <a href="?sap-ui-language=de">German</a> |
44
- <a href="?sap-ui-language=es">Spanish</a> |
45
- <a href="?sap-ui-language=fr">French</a>
46
-
47
- <br><br>
48
-
49
- <h1>Test your web components here</h1>
50
- <INIT_PACKAGE_VAR_TAG id="myFirstComponent"></INIT_PACKAGE_VAR_TAG>
23
+ <div class="app">
24
+ <a href="https://sap.github.io/ui5-webcomponents/playground/getting-started" target="_blank"><img src="./img/logo.png" alt="logo"/></a>
25
+
26
+ <div class="app-first-component">
27
+ <h1>Hooray! It's Your First Web Component!</h1>
28
+ <div> <pre>&lt;INIT_PACKAGE_VAR_TAG>&lt;/INIT_PACKAGE_VAR_TAG> </pre></div>
29
+ <INIT_PACKAGE_VAR_TAG id="myFirstComponent"></INIT_PACKAGE_VAR_TAG>
30
+ </div>
31
+
32
+ <div class="app-settings">
33
+
34
+ <h2>Switch themes</h2>
35
+ <div style="display: flex; flex-direction: row;">
36
+ <a class="link" href="?sap-ui-theme=sap_horizon">Horizon</a>
37
+ <a class="link" href="?sap-ui-theme=sap_horizon_dark">Horizon Dark</a>
38
+ <a class="link" href="?sap-ui-theme=sap_horizon_hcb">Horizon High Contrast Black</a>
39
+ <a class="link" href="?sap-ui-theme=sap_horizon_hcw">Horizon High Contrast White</a>
40
+ </div>
41
+
42
+ <h2>Switch language</h2>
43
+ <div>
44
+ <a class="link" href="?sap-ui-language=en">English</a>
45
+ <a class="link" href="?sap-ui-language=de">German</a>
46
+ <a class="link" href="?sap-ui-language=es">Spanish</a>
47
+ <a class="link" href="?sap-ui-language=fr">French</a>
48
+ </div>
49
+ </div>
50
+
51
+ <div class="app-docs">
52
+ <h2>Documentation</h2>
53
+ <a class="link" href="https://sap.github.io/ui5-webcomponents/playground/development">Custom Component Development</a>
54
+ </div>
55
+ </div>
51
56
  </body>
52
-
53
57
  </html>
package/template/test/specs/Demo.spec.js CHANGED
@@ -6,7 +6,6 @@ describe("INIT_PACKAGE_VAR_TAG rendering", async () => {
6
6
  });
7
7
 
8
8
  it("tests if web component is correctly rendered", async () => {
9
-
10
9
  const innerContent = await browser.$("#myFirstComponent").shadow$("div");
11
10
 
12
11
  assert.ok(innerContent, "content rendered");
package/template/src/themes/sap_fiori_3_dark/parameters-bundle.css DELETED
@@ -1,3 +0,0 @@
1
- :root {
2
- --my-component-border-color: blue;
3
- }
package/template/src/themes/sap_fiori_3_hcb/parameters-bundle.css DELETED
@@ -1,3 +0,0 @@
1
- :root {
2
- --my-component-border-color: lightblue;
3
- }
package/template/src/themes/sap_fiori_3_hcw/parameters-bundle.css DELETED
@@ -1,3 +0,0 @@
1
- :root {
2
- --my-component-border-color: gray;
3
- }