@hotosm/ui 0.2.0-a1 → 0.2.0-a2
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.
- package/components/Toolbar.d.ts +26 -0
- package/components/Toolbar.js +122 -0
- package/i18n/en.xliff +24 -0
- package/package.json +7 -4
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import "../theme/hot.css";
|
|
2
|
+
import '@shoelace-style/shoelace/dist/themes/light.css';
|
|
3
|
+
import '@shoelace-style/shoelace/dist/themes/dark.css';
|
|
4
|
+
import '@shoelace-style/shoelace/dist/components/button/button.js';
|
|
5
|
+
import '@shoelace-style/shoelace/dist/components/button-group/button-group.js';
|
|
6
|
+
import '@shoelace-style/shoelace/dist/components/icon/icon.js';
|
|
7
|
+
import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
|
|
8
|
+
import { LitElement } from "lit";
|
|
9
|
+
export declare class Toolbar extends LitElement {
|
|
10
|
+
name: string;
|
|
11
|
+
/** Change the position of the tooltips relative to buttons. */
|
|
12
|
+
tooltipPosition: string;
|
|
13
|
+
static styles: import("lit").CSSResult[];
|
|
14
|
+
protected render(): import("lit").TemplateResult<1>;
|
|
15
|
+
private renderButtonGroup;
|
|
16
|
+
private renderButton;
|
|
17
|
+
private readonly undo;
|
|
18
|
+
private readonly redo;
|
|
19
|
+
private readonly bold;
|
|
20
|
+
private readonly italic;
|
|
21
|
+
private readonly underline;
|
|
22
|
+
private readonly alignLeft;
|
|
23
|
+
private readonly alignCenter;
|
|
24
|
+
private readonly alignRight;
|
|
25
|
+
}
|
|
26
|
+
export default Toolbar;
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import "../theme/hot.css";
|
|
8
|
+
import '@shoelace-style/shoelace/dist/themes/light.css';
|
|
9
|
+
import '@shoelace-style/shoelace/dist/themes/dark.css';
|
|
10
|
+
import '@shoelace-style/shoelace/dist/components/button/button.js';
|
|
11
|
+
import '@shoelace-style/shoelace/dist/components/button-group/button-group.js';
|
|
12
|
+
import '@shoelace-style/shoelace/dist/components/icon/icon.js';
|
|
13
|
+
import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
|
|
14
|
+
import { LitElement, css, html } from "lit";
|
|
15
|
+
import { property } from "lit/decorators.js";
|
|
16
|
+
// import reset from "./tailwind-reset";
|
|
17
|
+
// import { cva } from "class-variance-authority";
|
|
18
|
+
// const toolbarStyle = cva(
|
|
19
|
+
// "some-css-var",
|
|
20
|
+
// {
|
|
21
|
+
// variants: {
|
|
22
|
+
// someProperty: {
|
|
23
|
+
// true: "some-css-var",
|
|
24
|
+
// false: "some-css-var",
|
|
25
|
+
// },
|
|
26
|
+
// },
|
|
27
|
+
// },
|
|
28
|
+
// );
|
|
29
|
+
export class Toolbar extends LitElement {
|
|
30
|
+
constructor() {
|
|
31
|
+
super(...arguments);
|
|
32
|
+
this.name = "hot-toolbar";
|
|
33
|
+
/** Change the position of the tooltips relative to buttons. */
|
|
34
|
+
this.tooltipPosition = "top";
|
|
35
|
+
this.undo = (e) => {
|
|
36
|
+
// As the original event is also named 'click'
|
|
37
|
+
// stop propagation of the original event
|
|
38
|
+
e.stopPropagation();
|
|
39
|
+
this.dispatchEvent(new Event("hot-undo-click"));
|
|
40
|
+
};
|
|
41
|
+
this.redo = (e) => {
|
|
42
|
+
e.stopPropagation();
|
|
43
|
+
this.dispatchEvent(new Event("hot-redo-click"));
|
|
44
|
+
};
|
|
45
|
+
this.bold = (e) => {
|
|
46
|
+
e.stopPropagation();
|
|
47
|
+
this.dispatchEvent(new Event("hot-bold-click"));
|
|
48
|
+
};
|
|
49
|
+
this.italic = (e) => {
|
|
50
|
+
e.stopPropagation();
|
|
51
|
+
this.dispatchEvent(new Event("hot-italic-click"));
|
|
52
|
+
};
|
|
53
|
+
this.underline = (e) => {
|
|
54
|
+
e.stopPropagation();
|
|
55
|
+
this.dispatchEvent(new Event("hot-underline-click"));
|
|
56
|
+
};
|
|
57
|
+
this.alignLeft = (e) => {
|
|
58
|
+
e.stopPropagation();
|
|
59
|
+
this.dispatchEvent(new Event("hot-leftalign-click"));
|
|
60
|
+
};
|
|
61
|
+
this.alignCenter = (e) => {
|
|
62
|
+
e.stopPropagation();
|
|
63
|
+
this.dispatchEvent(new Event("hot-centeralign-click"));
|
|
64
|
+
};
|
|
65
|
+
this.alignRight = (e) => {
|
|
66
|
+
e.stopPropagation();
|
|
67
|
+
this.dispatchEvent(new Event("hot-rightalign-click"));
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
// class=${toolbarStyle({
|
|
71
|
+
// someProperty: this.someProperty,
|
|
72
|
+
// })}
|
|
73
|
+
render() {
|
|
74
|
+
return html `
|
|
75
|
+
<div class="button-group-toolbar">
|
|
76
|
+
${this.renderButtonGroup('History', [
|
|
77
|
+
{ content: 'Undo', icon: 'arrow-counterclockwise', label: 'Undo', action: this.undo },
|
|
78
|
+
{ content: 'Redo', icon: 'arrow-clockwise', label: 'Redo', action: this.redo }
|
|
79
|
+
])}
|
|
80
|
+
${this.renderButtonGroup('Formatting', [
|
|
81
|
+
{ content: 'Bold', icon: 'type-bold', label: 'Bold', action: this.bold },
|
|
82
|
+
{ content: 'Italic', icon: 'type-italic', label: 'Italic', action: this.italic },
|
|
83
|
+
{ content: 'Underline', icon: 'type-underline', label: 'Underline', action: this.underline }
|
|
84
|
+
])}
|
|
85
|
+
${this.renderButtonGroup('Alignment', [
|
|
86
|
+
{ content: 'Align Left', icon: 'justify-left', label: 'Align Left', action: this.alignLeft },
|
|
87
|
+
{ content: 'Align Center', icon: 'justify', label: 'Align Center', action: this.alignCenter },
|
|
88
|
+
{ content: 'Align Right', icon: 'justify-right', label: 'Align Right', action: this.alignRight }
|
|
89
|
+
])}
|
|
90
|
+
</div>
|
|
91
|
+
`;
|
|
92
|
+
}
|
|
93
|
+
renderButtonGroup(label, buttons) {
|
|
94
|
+
return html `
|
|
95
|
+
<sl-button-group label=${label}>
|
|
96
|
+
${buttons.map(button => this.renderButton(button))}
|
|
97
|
+
</sl-button-group>
|
|
98
|
+
`;
|
|
99
|
+
}
|
|
100
|
+
renderButton({ content, icon, label, action }) {
|
|
101
|
+
return html `
|
|
102
|
+
<sl-tooltip content=${content} placement="${this.tooltipPosition}">
|
|
103
|
+
<sl-button @click=${action ?? (() => { })}><sl-icon name=${icon} label=${label}></sl-icon></sl-button>
|
|
104
|
+
</sl-tooltip>
|
|
105
|
+
`;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
Toolbar.styles = [
|
|
109
|
+
css `
|
|
110
|
+
@unocss-placeholder;
|
|
111
|
+
`,
|
|
112
|
+
// unsafeCSS(reset),
|
|
113
|
+
];
|
|
114
|
+
__decorate([
|
|
115
|
+
property()
|
|
116
|
+
], Toolbar.prototype, "name", void 0);
|
|
117
|
+
__decorate([
|
|
118
|
+
property({ type: String, attribute: "tooltip-position" })
|
|
119
|
+
], Toolbar.prototype, "tooltipPosition", void 0);
|
|
120
|
+
export default Toolbar;
|
|
121
|
+
// Define web component
|
|
122
|
+
customElements.define("hot-toolbar", Toolbar);
|
package/i18n/en.xliff
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
|
|
2
|
+
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
|
|
3
|
+
<file source-language="en" target-language="fr" datatype="plaintext" original="ng2.template">
|
|
4
|
+
<body>
|
|
5
|
+
<trans-unit id="common.welcome">
|
|
6
|
+
<source>Welcome!</source>
|
|
7
|
+
<target>Bienvenue!</target>
|
|
8
|
+
<context-group purpose="location">
|
|
9
|
+
<context context-type="sourcefile">src/app/app.component.html</context>
|
|
10
|
+
<context context-type="linenumber">16</context>
|
|
11
|
+
</context-group>
|
|
12
|
+
</trans-unit>
|
|
13
|
+
<trans-unit id="common.app.title">
|
|
14
|
+
<source>Diary</source>
|
|
15
|
+
<target>Agenda</target>
|
|
16
|
+
<context-group purpose="location">
|
|
17
|
+
<context context-type="sourcefile">src/app/app.component.html</context>
|
|
18
|
+
<context context-type="linenumber">4</context>
|
|
19
|
+
</context-group>
|
|
20
|
+
<note priority="1" from="description">App title</note>
|
|
21
|
+
</trans-unit>
|
|
22
|
+
</body>
|
|
23
|
+
</file>
|
|
24
|
+
</xliff>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hotosm/ui",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.0a2",
|
|
4
4
|
"description": "Shared UI components with theming for use across HOTOSM tools.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"engines": {
|
|
@@ -66,9 +66,12 @@
|
|
|
66
66
|
"react-dom": "Required for Storybook"
|
|
67
67
|
},
|
|
68
68
|
"files": [
|
|
69
|
-
"
|
|
70
|
-
"
|
|
71
|
-
"
|
|
69
|
+
"components/*.js",
|
|
70
|
+
"components/*.d.ts",
|
|
71
|
+
"react/*.js",
|
|
72
|
+
"react/*.d.ts",
|
|
73
|
+
"theme/hot.css",
|
|
74
|
+
"i18n/*.xliff"
|
|
72
75
|
],
|
|
73
76
|
"publishConfig": {
|
|
74
77
|
"access": "public"
|