@operato/context 9.2.1 → 10.0.0-beta.2
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/CHANGELOG.md +15 -0
- package/dist/src/layouts/ox-context-page-toolbar.d.ts +3 -10
- package/dist/src/layouts/ox-context-page-toolbar.js +8 -8
- package/dist/src/layouts/ox-context-page-toolbar.js.map +1 -1
- package/dist/src/layouts/ox-context-toolbar.d.ts +3 -12
- package/dist/src/layouts/ox-context-toolbar.js +12 -19
- package/dist/src/layouts/ox-context-toolbar.js.map +1 -1
- package/dist/src/tools/ox-page-action-context-bar.d.ts +3 -10
- package/dist/src/tools/ox-page-action-context-bar.js +5 -6
- package/dist/src/tools/ox-page-action-context-bar.js.map +1 -1
- package/dist/src/tools/ox-page-action-overlay-template.d.ts +2 -11
- package/dist/src/tools/ox-page-action-overlay-template.js +8 -14
- package/dist/src/tools/ox-page-action-overlay-template.js.map +1 -1
- package/dist/src/tools/ox-page-title-bar.d.ts +2 -11
- package/dist/src/tools/ox-page-title-bar.js +5 -11
- package/dist/src/tools/ox-page-title-bar.js.map +1 -1
- package/dist/src/tools/ox-title-bar.d.ts +2 -11
- package/dist/src/tools/ox-title-bar.js +8 -11
- package/dist/src/tools/ox-title-bar.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +10 -11
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,21 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [10.0.0-beta.2](https://github.com/hatiolab/operato/compare/v10.0.0-beta.1...v10.0.0-beta.2) (2026-03-05)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :house: Code Refactoring
|
|
10
|
+
|
|
11
|
+
* **context:** 6개 context 컴포넌트 → RouteController + ContextController ([1fffc45](https://github.com/hatiolab/operato/commit/1fffc45d72553180aca923ba18e0ac01cd2cb064))
|
|
12
|
+
* **shell:** pwa-helpers connect-mixin/lazyReducerEnhancer 인라인 교체 (Phase 7-pwa-2) ([c578bdf](https://github.com/hatiolab/operato/commit/c578bdfd8dca2742afca69ae5eeb83142602a6a2))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### :mega: Other
|
|
16
|
+
|
|
17
|
+
* modernize publish config for npm release ([7fe28ab](https://github.com/hatiolab/operato/commit/7fe28ab8818f8dc4a281f9f82db5d13b49f2cf9d))
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
6
21
|
### [9.2.1](https://github.com/hatiolab/operato/compare/v9.2.0...v9.2.1) (2025-11-09)
|
|
7
22
|
|
|
8
23
|
**Note:** Version bump only for package @operato/context
|
|
@@ -1,15 +1,9 @@
|
|
|
1
1
|
import '@material/web/icon/icon.js';
|
|
2
2
|
import { LitElement, TemplateResult } from 'lit';
|
|
3
3
|
import { TOOL_POSITION } from '@operato/layout';
|
|
4
|
-
declare
|
|
5
|
-
_storeUnsubscribe: import("redux").Unsubscribe;
|
|
6
|
-
connectedCallback(): void;
|
|
7
|
-
disconnectedCallback(): void;
|
|
8
|
-
stateChanged(_state: unknown): void;
|
|
9
|
-
readonly isConnected: boolean;
|
|
10
|
-
}) & typeof LitElement;
|
|
11
|
-
export declare class ContextPageToolbar extends ContextPageToolbar_base {
|
|
4
|
+
export declare class ContextPageToolbar extends LitElement {
|
|
12
5
|
static get styles(): import("lit").CSSResult[];
|
|
6
|
+
private _context;
|
|
13
7
|
context: any;
|
|
14
8
|
tools?: {
|
|
15
9
|
position: TOOL_POSITION;
|
|
@@ -17,6 +11,5 @@ export declare class ContextPageToolbar extends ContextPageToolbar_base {
|
|
|
17
11
|
context?: string;
|
|
18
12
|
}[];
|
|
19
13
|
render(): TemplateResult<1>;
|
|
20
|
-
|
|
14
|
+
protected willUpdate(): void;
|
|
21
15
|
}
|
|
22
|
-
export {};
|
|
@@ -2,10 +2,13 @@ import { __decorate } from "tslib";
|
|
|
2
2
|
import '@material/web/icon/icon.js';
|
|
3
3
|
import { css, html, LitElement, nothing } from 'lit';
|
|
4
4
|
import { customElement, property } from 'lit/decorators.js';
|
|
5
|
-
import { connect } from 'pwa-helpers/connect-mixin.js';
|
|
6
5
|
import { TOOL_POSITION } from '@operato/layout';
|
|
7
|
-
import {
|
|
8
|
-
let ContextPageToolbar = class ContextPageToolbar extends
|
|
6
|
+
import { ContextController } from '@operato/shell';
|
|
7
|
+
let ContextPageToolbar = class ContextPageToolbar extends LitElement {
|
|
8
|
+
constructor() {
|
|
9
|
+
super(...arguments);
|
|
10
|
+
this._context = new ContextController(this);
|
|
11
|
+
}
|
|
9
12
|
static get styles() {
|
|
10
13
|
return [
|
|
11
14
|
css `
|
|
@@ -99,11 +102,8 @@ let ContextPageToolbar = class ContextPageToolbar extends connect(store)(LitElem
|
|
|
99
102
|
<slot name="rear"></slot>
|
|
100
103
|
`;
|
|
101
104
|
}
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
if (state.context) {
|
|
105
|
-
this.tools = (_a = state.context) === null || _a === void 0 ? void 0 : _a.tools;
|
|
106
|
-
}
|
|
105
|
+
willUpdate() {
|
|
106
|
+
this.tools = this._context.tools;
|
|
107
107
|
}
|
|
108
108
|
};
|
|
109
109
|
__decorate([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-context-page-toolbar.js","sourceRoot":"","sources":["../../../src/layouts/ox-context-page-toolbar.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAA;AACpE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAgB,MAAM,mBAAmB,CAAA;AACzE,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ox-context-page-toolbar.js","sourceRoot":"","sources":["../../../src/layouts/ox-context-page-toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, TemplateResult, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { TOOL_POSITION } from '@operato/layout'\nimport { ContextController } from '@operato/shell'\n\n@customElement('ox-context-page-toolbar')\nexport class ContextPageToolbar extends LitElement {\n static get styles() {\n return [\n css`\n :host {\n display: flex;\n flex-direction: row-reverse;\n gap: var(--spacing-medium);\n\n position: relative;\n\n justify-content: end;\n align-items: center;\n\n text-transform: capitalize;\n\n --context-action-bar-button-margin: var(--spacing-none);\n --context-action-bar-more-button-border-radius: 2px;\n\n --md-icon-size: 20px;\n }\n\n :host > div {\n display: flex;\n flex-direction: row;\n\n align-items: center;\n gap: var(--spacing-small);\n }\n\n md-icon {\n width: 32px;\n height: 32px;\n box-sizing: border-box;\n\n color: var(--md-sys-color-on-primary-container);\n background-color: var(--md-sys-color-primary-container);\n border: 1px solid var(--md-sys-color-primary-container);\n border-radius: var(--md-sys-shape-corner-small);\n padding: var(--spacing-small);\n\n &:hover {\n color: var(--md-sys-color-on-primary);\n background-color: var(--md-sys-color-primary);\n border-color: var(--md-sys-color-primary);\n }\n }\n\n @media screen and (max-width: 460px) {\n :host {\n gap: 0;\n }\n\n :host > div {\n gap: 0;\n }\n\n md-icon {\n border-radius: 0;\n }\n }\n `\n ]\n }\n\n private _context = new ContextController(this)\n\n @property({ type: Object }) context: any\n @property({ type: Array }) tools?: {\n position: TOOL_POSITION\n template: TemplateResult\n context?: string\n }[]\n\n render() {\n let contextKeys = Object.keys(this.context).filter(key => !!this.context[key])\n let tools = (this.tools || []).filter(tool => {\n if (!tool.context || contextKeys.includes(tool.context)) {\n return tool\n }\n })\n\n let frontEndTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT_END)\n let frontTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT)\n let centerTools = tools.filter(tool => tool.position == TOOL_POSITION.CENTER)\n let rearTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR)\n let rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END)\n\n return html`\n <slot name=\"front\"></slot>\n ${frontEndTools.length > 0\n ? html`<div id=\"front-end\">${frontEndTools.map(tool => html` ${tool.template} `)}</div>`\n : nothing}\n ${frontTools.length > 0\n ? html`<div id=\"front\">${frontTools.map(tool => html` ${tool.template} `)}</div>`\n : nothing}\n ${centerTools.length > 0\n ? html`<div id=\"center\">${centerTools.map(tool => html` ${tool.template} `)}</div>`\n : nothing}\n ${rearTools.length > 0 ? html`<div id=\"rear\">${rearTools.map(tool => html` ${tool.template} `)}</div>` : nothing}\n ${rearEndTools.length > 0\n ? html`<div id=\"rear-end\">${rearEndTools.map(tool => html` ${tool.template} `)}</div>`\n : nothing}\n <slot name=\"rear\"></slot>\n `\n }\n\n protected willUpdate() {\n this.tools = this._context.tools\n }\n}\n"]}
|
|
@@ -1,19 +1,10 @@
|
|
|
1
1
|
import '@material/web/icon/icon.js';
|
|
2
2
|
import { LitElement, nothing, PropertyValues } from 'lit';
|
|
3
|
-
declare
|
|
4
|
-
_storeUnsubscribe: import("redux").Unsubscribe;
|
|
5
|
-
connectedCallback(): void;
|
|
6
|
-
disconnectedCallback(): void;
|
|
7
|
-
stateChanged(_state: unknown): void;
|
|
8
|
-
readonly isConnected: boolean;
|
|
9
|
-
}) & typeof LitElement;
|
|
10
|
-
export declare class ContextToolbar extends ContextToolbar_base {
|
|
3
|
+
export declare class ContextToolbar extends LitElement {
|
|
11
4
|
static get styles(): import("lit").CSSResult[];
|
|
12
|
-
private
|
|
13
|
-
private
|
|
5
|
+
private _route;
|
|
6
|
+
private _context;
|
|
14
7
|
private container;
|
|
15
8
|
render(): import("lit-html").TemplateResult<1> | typeof nothing;
|
|
16
9
|
updated(changes: PropertyValues<this>): void;
|
|
17
|
-
stateChanged(state: any): void;
|
|
18
10
|
}
|
|
19
|
-
export {};
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import '@material/web/icon/icon.js';
|
|
3
3
|
import { css, html, LitElement, nothing } from 'lit';
|
|
4
|
-
import { customElement, query
|
|
5
|
-
import { connect } from 'pwa-helpers/connect-mixin.js';
|
|
4
|
+
import { customElement, query } from 'lit/decorators.js';
|
|
6
5
|
import { TOOL_POSITION } from '@operato/layout';
|
|
7
|
-
import {
|
|
8
|
-
let ContextToolbar = class ContextToolbar extends
|
|
6
|
+
import { RouteController, ContextController } from '@operato/shell';
|
|
7
|
+
let ContextToolbar = class ContextToolbar extends LitElement {
|
|
8
|
+
constructor() {
|
|
9
|
+
super(...arguments);
|
|
10
|
+
this._route = new RouteController(this);
|
|
11
|
+
this._context = new ContextController(this);
|
|
12
|
+
}
|
|
9
13
|
static get styles() {
|
|
10
14
|
return [
|
|
11
15
|
css `
|
|
@@ -124,11 +128,12 @@ let ContextToolbar = class ContextToolbar extends connect(store)(LitElement) {
|
|
|
124
128
|
];
|
|
125
129
|
}
|
|
126
130
|
render() {
|
|
127
|
-
|
|
131
|
+
const context = this._route.context || {};
|
|
132
|
+
if (context.toolbar === false) {
|
|
128
133
|
return nothing;
|
|
129
134
|
}
|
|
130
|
-
let contextKeys = Object.keys(
|
|
131
|
-
let tools = (this.tools || []).filter(tool => {
|
|
135
|
+
let contextKeys = Object.keys(context).filter(key => !!context[key]);
|
|
136
|
+
let tools = (this._context.tools || []).filter(tool => {
|
|
132
137
|
if (!tool.context || contextKeys.includes(tool.context)) {
|
|
133
138
|
return tool;
|
|
134
139
|
}
|
|
@@ -181,19 +186,7 @@ let ContextToolbar = class ContextToolbar extends connect(store)(LitElement) {
|
|
|
181
186
|
this.container.style.padding = zero ? '0' : 'revert-layer';
|
|
182
187
|
});
|
|
183
188
|
}
|
|
184
|
-
stateChanged(state) {
|
|
185
|
-
if (state.context) {
|
|
186
|
-
this.tools = state.context.tools || [];
|
|
187
|
-
this.context = state.route.context || {};
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
189
|
};
|
|
191
|
-
__decorate([
|
|
192
|
-
state()
|
|
193
|
-
], ContextToolbar.prototype, "context", void 0);
|
|
194
|
-
__decorate([
|
|
195
|
-
state()
|
|
196
|
-
], ContextToolbar.prototype, "tools", void 0);
|
|
197
190
|
__decorate([
|
|
198
191
|
query('[container]')
|
|
199
192
|
], ContextToolbar.prototype, "container", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-context-toolbar.js","sourceRoot":"","sources":["../../../src/layouts/ox-context-toolbar.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAA;AACpE,OAAO,EAAE,aAAa,EAAY,KAAK,
|
|
1
|
+
{"version":3,"file":"ox-context-toolbar.js","sourceRoot":"","sources":["../../../src/layouts/ox-context-toolbar.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAA;AACpE,OAAO,EAAE,aAAa,EAAY,KAAK,EAAS,MAAM,mBAAmB,CAAA;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAG5D,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAuHG,WAAM,GAAG,IAAI,eAAe,CAAC,IAAI,CAAC,CAAA;QAClC,aAAQ,GAAG,IAAI,iBAAiB,CAAC,IAAI,CAAC,CAAA;IAyEhD,CAAC;IAhMC,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAgHF;SACF,CAAA;IACH,CAAC;IAOD,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;QAEzC,IAAI,OAAO,CAAC,OAAO,KAAK,KAAK,EAAE,CAAC;YAC9B,OAAO,OAAO,CAAA;QAChB,CAAC;QAED,IAAI,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAA;QACpE,IAAI,KAAK,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;YACpD,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;gBACxD,OAAO,IAAI,CAAA;YACb,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,IAAI,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,aAAa,CAAC,SAAS,CAAC,CAAA;QAClF,IAAI,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,aAAa,CAAC,KAAK,CAAC,CAAA;QAC3E,IAAI,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,aAAa,CAAC,MAAM,CAAC,CAAA;QAC7E,IAAI,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,aAAa,CAAC,IAAI,CAAC,CAAA;QACzE,IAAI,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,aAAa,CAAC,QAAQ,CAAC,CAAA;QAEhF,OAAO,IAAI,CAAA;;UAEL,aAAa,CAAC,MAAM,GAAG,CAAC;YACxB,CAAC,CAAC,IAAI,CAAA,uBAAuB,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,QAAQ;YACxF,CAAC,CAAC,OAAO;UACT,UAAU,CAAC,MAAM,GAAG,CAAC;YACrB,CAAC,CAAC,IAAI,CAAA,mBAAmB,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,QAAQ;YACjF,CAAC,CAAC,OAAO;UACT,WAAW,CAAC,MAAM,GAAG,CAAC;YACtB,CAAC,CAAC,IAAI,CAAA,oBAAoB,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,QAAQ;YACnF,CAAC,CAAC,OAAO;UACT,SAAS,CAAC,MAAM,GAAG,CAAC;YACpB,CAAC,CAAC,IAAI,CAAA,kBAAkB,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,QAAQ;YAC/E,CAAC,CAAC,OAAO;UACT,YAAY,CAAC,MAAM,GAAG,CAAC;YACvB,CAAC,CAAC,IAAI,CAAA,sBAAsB,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,QAAQ;YACtF,CAAC,CAAC,OAAO;;KAEd,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,qBAAqB,CAAC,GAAG,EAAE;YACzB;;;;cAIE;YACF,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;gBACpB,OAAM;YACR,CAAC;YAED,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAA;YAErD,IAAI,IAAI,GAAG,IAAI,CAAA;YAEf,qBAAqB;YACrB,KAAK,MAAM,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACzC,IAAK,KAAqB,CAAC,YAAY,KAAK,CAAC,EAAE,CAAC;oBAC9C,IAAI,GAAG,KAAK,CAAA;oBACZ,MAAK;gBACP,CAAC;YACH,CAAC;YAED,kDAAkD;YAClD,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,cAAc,CAAA;QAC5D,CAAC,CAAC,CAAA;IACJ,CAAC;CAEF,CAAA;AAvE+B;IAA7B,KAAK,CAAC,aAAa,CAAC;iDAAmC;AA1H7C,cAAc;IAD1B,aAAa,CAAC,oBAAoB,CAAC;GACvB,cAAc,CAiM1B","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { TOOL_POSITION } from '@operato/layout'\nimport { RouteController, ContextController } from '@operato/shell'\n\n@customElement('ox-context-toolbar')\nexport class ContextToolbar extends LitElement {\n static get styles() {\n return [\n css`\n :host {\n display: flex;\n\n color: var(--context-toolbar-background-color, var(--md-sys-color-on-secondary-container));\n background-color: var(--context-toolbar-background-color, var(--md-sys-color-secondary-container));\n box-shadow: var(--context-toolbar-shadow-line);\n\n padding: 0;\n\n --md-icon-size: 20px;\n }\n\n div[container] {\n flex: 1;\n\n display: flex;\n position: relative;\n overflow: hidden;\n\n justify-content: space-between;\n\n gap: var(--spacing-medium);\n padding: var(--spacing-small) var(--spacing-medium);\n\n &:not(:has(> *)) {\n padding: 0;\n }\n\n div {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n\n align-items: center;\n overflow: hidden;\n padding: 0;\n }\n\n #front-end md-icon,\n #front md-icon {\n border: var(--context-toolbar-function-button-border, none);\n }\n\n #front-end md-icon {\n color: var(--md-sys-color-on-primary-container);\n background-color: var(--md-sys-color-on-primary-container);\n }\n\n #front-end md-icon:hover {\n color: var(--md-sys-color-on-primary);\n background-color: var(--md-sys-color-primary);\n }\n\n #front md-icon {\n color: var(--md-sys-color-on-secondary-container);\n background-color: var(--md-sys-color-secondary-container);\n }\n\n #front md-icon:hover {\n color: var(--md-sys-on-color-secondary);\n background-color: var(--md-sys-color-secondary);\n }\n\n md-icon {\n color: var(--md-sys-color-on-primary-container);\n background-color: var(--md-sys-color-primary-container);\n border: 1px solid var(--md-sys-color-primary-container);\n border-radius: var(--md-sys-shape-corner-small);\n padding: var(--spacing-small);\n\n &:hover {\n color: var(--md-sys-color-on-primary);\n background-color: var(--md-sys-color-primary);\n }\n }\n\n div md-icon {\n border-radius: 0;\n }\n\n div md-icon:first-child {\n border-top-left-radius: var(--md-sys-shape-corner-small);\n border-bottom-left-radius: var(--md-sys-shape-corner-small);\n }\n\n div md-icon:last-child {\n border-top-right-radius: var(--md-sys-shape-corner-small);\n border-bottom-right-radius: var(--md-sys-shape-corner-small);\n }\n\n #center {\n flex: 1;\n justify-content: end;\n }\n }\n\n @media only screen and (max-width: 460px) {\n div[container] {\n padding: 0;\n gap: 0;\n --md-assist-chip-container-shape: 0;\n }\n\n div[container] div md-icon {\n border-radius: 0 !important;\n }\n\n div[container] div md-icon:not(:last-child) {\n border-right-width: 0;\n }\n }\n `\n ]\n }\n\n private _route = new RouteController(this)\n private _context = new ContextController(this)\n\n @query('[container]') private container!: HTMLDivElement\n\n render() {\n const context = this._route.context || {}\n\n if (context.toolbar === false) {\n return nothing\n }\n\n let contextKeys = Object.keys(context).filter(key => !!context[key])\n let tools = (this._context.tools || []).filter(tool => {\n if (!tool.context || contextKeys.includes(tool.context)) {\n return tool\n }\n })\n\n let frontEndTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT_END)\n let frontTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT)\n let centerTools = tools.filter(tool => tool.position == TOOL_POSITION.CENTER)\n let rearTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR)\n let rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END)\n\n return html`\n <div container>\n ${frontEndTools.length > 0\n ? html`<div id=\"front-end\">${frontEndTools.map(tool => html` ${tool.template} `)}</div>`\n : nothing}\n ${frontTools.length > 0\n ? html`<div id=\"front\">${frontTools.map(tool => html` ${tool.template} `)}</div>`\n : nothing}\n ${centerTools.length > 0\n ? html`<div id=\"center\">${centerTools.map(tool => html` ${tool.template} `)}</div>`\n : nothing}\n ${rearTools.length > 0\n ? html`<div id=\"rear\">${rearTools.map(tool => html` ${tool.template} `)}</div>`\n : nothing}\n ${rearEndTools.length > 0\n ? html`<div id=\"rear-end\">${rearEndTools.map(tool => html` ${tool.template} `)}</div>`\n : nothing}\n </div>\n `\n }\n\n updated(changes: PropertyValues<this>) {\n requestAnimationFrame(() => {\n /*\n 하위 엘리먼트들이 실제로 보일 필요가 없을 때는, 이 엘리먼트도 숨김 처리함.\n &:not(:has(> *)) 처리로 모두 해결되지 않으므로, 로직 처리로 보완함.\n &:not(:has(> *)) 가 필요없으나, 남겨 두었음.\n */\n if (!this.container) {\n return\n }\n\n const children = this.container.querySelectorAll('*')\n\n let zero = true\n\n // 모든 하위 엘리먼트의 높이를 확인\n for (const child of Array.from(children)) {\n if ((child as HTMLElement).offsetHeight !== 0) {\n zero = false\n break\n }\n }\n\n // 모든 하위 엘리먼트의 높이가 0이면 부모 엘리먼트의 display를 none으로 변경\n this.container.style.padding = zero ? '0' : 'revert-layer'\n })\n }\n\n}\n"]}
|
|
@@ -2,15 +2,9 @@ import '@material/web/icon/icon.js';
|
|
|
2
2
|
import '@material/web/chips/assist-chip.js';
|
|
3
3
|
import './ox-page-action-overlay-template.js';
|
|
4
4
|
import { LitElement, nothing, PropertyValues } from 'lit';
|
|
5
|
-
declare
|
|
6
|
-
_storeUnsubscribe: import("redux").Unsubscribe;
|
|
7
|
-
connectedCallback(): void;
|
|
8
|
-
disconnectedCallback(): void;
|
|
9
|
-
stateChanged(_state: unknown): void;
|
|
10
|
-
readonly isConnected: boolean;
|
|
11
|
-
}) & typeof LitElement;
|
|
12
|
-
export declare class PageActionContextBar extends PageActionContextBar_base {
|
|
5
|
+
export declare class PageActionContextBar extends LitElement {
|
|
13
6
|
static get styles(): import("lit").CSSResult[];
|
|
7
|
+
private _route;
|
|
14
8
|
actions: {
|
|
15
9
|
title: string;
|
|
16
10
|
action: () => void;
|
|
@@ -30,7 +24,6 @@ export declare class PageActionContextBar extends PageActionContextBar_base {
|
|
|
30
24
|
render(): import("lit-html").TemplateResult<1> | typeof nothing;
|
|
31
25
|
renderActions(): import("lit-html").TemplateResult<1>;
|
|
32
26
|
updated(changed: PropertyValues<this>): Promise<void>;
|
|
33
|
-
|
|
27
|
+
protected willUpdate(): void;
|
|
34
28
|
showMore(): void;
|
|
35
29
|
}
|
|
36
|
-
export {};
|
|
@@ -5,14 +5,14 @@ import './ox-page-action-overlay-template.js';
|
|
|
5
5
|
import { css, html, LitElement, nothing } from 'lit';
|
|
6
6
|
import { customElement, property, query, state } from 'lit/decorators.js';
|
|
7
7
|
import throttle from 'lodash-es/throttle.js';
|
|
8
|
-
import { connect } from 'pwa-helpers/connect-mixin.js';
|
|
9
8
|
import { openOverlay } from '@operato/layout';
|
|
10
|
-
import {
|
|
9
|
+
import { RouteController } from '@operato/shell';
|
|
11
10
|
import { sleep } from '@operato/utils';
|
|
12
11
|
import { ButtonContainerStyles } from '@operato/styles';
|
|
13
|
-
let PageActionContextBar = class PageActionContextBar extends
|
|
12
|
+
let PageActionContextBar = class PageActionContextBar extends LitElement {
|
|
14
13
|
constructor() {
|
|
15
14
|
super(...arguments);
|
|
15
|
+
this._route = new RouteController(this);
|
|
16
16
|
this.actions = [];
|
|
17
17
|
this.overflown = false;
|
|
18
18
|
}
|
|
@@ -179,9 +179,8 @@ let PageActionContextBar = class PageActionContextBar extends connect(store)(Lit
|
|
|
179
179
|
requestAnimationFrame(this.overflownUpdater);
|
|
180
180
|
}
|
|
181
181
|
}
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
const { actions } = ((_a = state.route) === null || _a === void 0 ? void 0 : _a.context) || {};
|
|
182
|
+
willUpdate() {
|
|
183
|
+
const { actions } = this._route.context || {};
|
|
185
184
|
if (actions) {
|
|
186
185
|
this.actions = actions.filter((action) => !!action);
|
|
187
186
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-page-action-context-bar.js","sourceRoot":"","sources":["../../../src/tools/ox-page-action-context-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/chips/assist-chip.js'\nimport './ox-page-action-overlay-template.js'\n\nimport { css, html, LitElement, nothing, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport throttle from 'lodash-es/throttle.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { openOverlay } from '@operato/layout'\nimport { store } from '@operato/shell'\nimport { sleep } from '@operato/utils'\nimport { ButtonContainerStyles } from '@operato/styles'\n\n@customElement('ox-page-action-context-bar')\nexport class PageActionContextBar extends connect(store)(LitElement) {\n static get styles() {\n return [\n ButtonContainerStyles,\n css`\n :host {\n display: flex;\n position: relative;\n overflow-x: clip;\n overflow-y: hidden;\n\n text-transform: capitalize;\n }\n\n :host *:focus {\n outline: none;\n }\n\n [container] {\n flex: 1;\n\n display: flex;\n overflow: hidden;\n gap: var(--spacing-small);\n padding: 2px; /* only for button shadow */\n align-items: center;\n }\n\n [more] {\n position: absolute;\n bottom: 0;\n right: 0;\n color: var(--md-sys-color-inverse-on-surface);\n background-color: var(--md-sys-color-inverse-surface);\n box-shadow: -2px 0px 2px 1px rgba(0, 0, 0, 0.2);\n padding: var(--context-action-bar-more-button-padding, 11px 10px);\n font-size: 2rem;\n z-index: 10;\n }\n\n select,\n input[type='text'] {\n box-sizing: border-box;\n padding: 0 var(--spacing-small);\n height: var(--form-element-height-medium);\n border: 1px solid var(--md-sys-color-outline);\n border-radius: var(--md-sys-shape-corner-small);\n color: var(--md-sys-color-on-primary);\n background-color: var(--md-sys-color-on-primary);\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n outline: none;\n }\n\n md-icon[working] {\n animation: rotate 1s linear infinite;\n }\n\n md-assist-chip[icon-only] {\n --md-assist-chip-trailing-space: 0;\n }\n\n @media screen and (max-width: 460px) {\n [container] {\n padding: 0;\n gap: 0;\n --md-assist-chip-container-shape: 0;\n }\n }\n\n @keyframes rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n `\n ]\n }\n\n @property({ type: Array }) actions: {\n title: string\n action: () => void\n icon: string\n type: string\n select: string[]\n href?: string\n emphasis?: boolean\n }[] = []\n\n @state() private overflown: boolean = false\n @query('[container]') container?: HTMLDivElement\n\n private overflownUpdaterThrottle: any\n private resizeCallback: any\n\n get overflownUpdater() {\n if (!this.overflownUpdaterThrottle) {\n this.overflownUpdaterThrottle = throttle(() => {\n this.overflown = !!this.container && this.container.scrollWidth > this.container.clientWidth\n }, 100)\n }\n\n return this.overflownUpdaterThrottle\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this.resizeCallback = () => this.overflownUpdater()\n\n window.addEventListener('resize', this.resizeCallback)\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n\n window.removeEventListener('resize', this.resizeCallback)\n }\n\n render() {\n return this.actions.length > 0\n ? html`\n <div container>${this.renderActions()}</div>\n ${this.overflown ? html` <md-icon more @click=${this.showMore.bind(this)}>more_horiz</md-icon> ` : html``}\n `\n : nothing\n }\n\n renderActions() {\n return html`\n ${this.actions.map(($action, idx) => {\n let { type, title, icon, action, select, href, emphasis } = $action as any\n let { raised, danger } = emphasis || {}\n\n return type == 'text'\n ? html` <span @click=${action}>${title}</span> `\n : type == 'select' || (select && select.length > 0)\n ? html`\n <select @change=${action}>\n ${select.map((option: any) => html` <option>${option}</option> `)}\n </select>\n `\n : type == 'link'\n ? html` <a href=${href}>${title}</a> `\n : html`\n <md-assist-chip\n ?icon-only=${type == 'icon' || !title}\n ?elevated=${raised}\n ?danger=${danger}\n label=${title}\n @click=${async (e: MouseEvent) => {\n /* all actions should be bloked for a second */\n const button = e.currentTarget as any\n const iconElement = button.querySelector('[slot=\"icon\"]')\n const actionConfig = this.actions[idx]\n\n if (iconElement) {\n icon = actionConfig.icon\n actionConfig.icon = 'refresh'\n this.requestUpdate()\n iconElement.setAttribute('working', true)\n }\n button.disabled = true\n\n try {\n await action()\n } finally {\n await sleep(1000) /* waiting for additionla 1 second */\n\n /* because icon can be changed after sleep, don't use closure 'icon'. */\n if (iconElement) {\n actionConfig.icon = icon\n this.requestUpdate()\n iconElement.removeAttribute('working')\n }\n button.disabled = false\n }\n }}\n >\n <md-icon slot=\"icon\">${this.actions[idx].icon}</md-icon>\n </md-assist-chip>\n `\n })}\n `\n }\n\n async updated(changed: PropertyValues<this>) {\n if (changed.has('actions')) {\n requestAnimationFrame(this.overflownUpdater)\n }\n }\n\n stateChanged(state: any) {\n const { actions } = state.route?.context || {}\n\n if (actions) {\n this.actions = actions.filter((action: any) => !!action)\n }\n }\n\n showMore() {\n openOverlay('context-toolbar-overlay', {\n template: html`<ox-page-action-overlay-template></ox-page-action-overlay-template>`\n })\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-page-action-context-bar.js","sourceRoot":"","sources":["../../../src/tools/ox-page-action-context-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/chips/assist-chip.js'\nimport './ox-page-action-overlay-template.js'\n\nimport { css, html, LitElement, nothing, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport throttle from 'lodash-es/throttle.js'\nimport { openOverlay } from '@operato/layout'\nimport { RouteController } from '@operato/shell'\nimport { sleep } from '@operato/utils'\nimport { ButtonContainerStyles } from '@operato/styles'\n\n@customElement('ox-page-action-context-bar')\nexport class PageActionContextBar extends LitElement {\n static get styles() {\n return [\n ButtonContainerStyles,\n css`\n :host {\n display: flex;\n position: relative;\n overflow-x: clip;\n overflow-y: hidden;\n\n text-transform: capitalize;\n }\n\n :host *:focus {\n outline: none;\n }\n\n [container] {\n flex: 1;\n\n display: flex;\n overflow: hidden;\n gap: var(--spacing-small);\n padding: 2px; /* only for button shadow */\n align-items: center;\n }\n\n [more] {\n position: absolute;\n bottom: 0;\n right: 0;\n color: var(--md-sys-color-inverse-on-surface);\n background-color: var(--md-sys-color-inverse-surface);\n box-shadow: -2px 0px 2px 1px rgba(0, 0, 0, 0.2);\n padding: var(--context-action-bar-more-button-padding, 11px 10px);\n font-size: 2rem;\n z-index: 10;\n }\n\n select,\n input[type='text'] {\n box-sizing: border-box;\n padding: 0 var(--spacing-small);\n height: var(--form-element-height-medium);\n border: 1px solid var(--md-sys-color-outline);\n border-radius: var(--md-sys-shape-corner-small);\n color: var(--md-sys-color-on-primary);\n background-color: var(--md-sys-color-on-primary);\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n outline: none;\n }\n\n md-icon[working] {\n animation: rotate 1s linear infinite;\n }\n\n md-assist-chip[icon-only] {\n --md-assist-chip-trailing-space: 0;\n }\n\n @media screen and (max-width: 460px) {\n [container] {\n padding: 0;\n gap: 0;\n --md-assist-chip-container-shape: 0;\n }\n }\n\n @keyframes rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n `\n ]\n }\n\n private _route = new RouteController(this)\n\n @property({ type: Array }) actions: {\n title: string\n action: () => void\n icon: string\n type: string\n select: string[]\n href?: string\n emphasis?: boolean\n }[] = []\n\n @state() private overflown: boolean = false\n @query('[container]') container?: HTMLDivElement\n\n private overflownUpdaterThrottle: any\n private resizeCallback: any\n\n get overflownUpdater() {\n if (!this.overflownUpdaterThrottle) {\n this.overflownUpdaterThrottle = throttle(() => {\n this.overflown = !!this.container && this.container.scrollWidth > this.container.clientWidth\n }, 100)\n }\n\n return this.overflownUpdaterThrottle\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this.resizeCallback = () => this.overflownUpdater()\n\n window.addEventListener('resize', this.resizeCallback)\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n\n window.removeEventListener('resize', this.resizeCallback)\n }\n\n render() {\n return this.actions.length > 0\n ? html`\n <div container>${this.renderActions()}</div>\n ${this.overflown ? html` <md-icon more @click=${this.showMore.bind(this)}>more_horiz</md-icon> ` : html``}\n `\n : nothing\n }\n\n renderActions() {\n return html`\n ${this.actions.map(($action, idx) => {\n let { type, title, icon, action, select, href, emphasis } = $action as any\n let { raised, danger } = emphasis || {}\n\n return type == 'text'\n ? html` <span @click=${action}>${title}</span> `\n : type == 'select' || (select && select.length > 0)\n ? html`\n <select @change=${action}>\n ${select.map((option: any) => html` <option>${option}</option> `)}\n </select>\n `\n : type == 'link'\n ? html` <a href=${href}>${title}</a> `\n : html`\n <md-assist-chip\n ?icon-only=${type == 'icon' || !title}\n ?elevated=${raised}\n ?danger=${danger}\n label=${title}\n @click=${async (e: MouseEvent) => {\n /* all actions should be bloked for a second */\n const button = e.currentTarget as any\n const iconElement = button.querySelector('[slot=\"icon\"]')\n const actionConfig = this.actions[idx]\n\n if (iconElement) {\n icon = actionConfig.icon\n actionConfig.icon = 'refresh'\n this.requestUpdate()\n iconElement.setAttribute('working', true)\n }\n button.disabled = true\n\n try {\n await action()\n } finally {\n await sleep(1000) /* waiting for additionla 1 second */\n\n /* because icon can be changed after sleep, don't use closure 'icon'. */\n if (iconElement) {\n actionConfig.icon = icon\n this.requestUpdate()\n iconElement.removeAttribute('working')\n }\n button.disabled = false\n }\n }}\n >\n <md-icon slot=\"icon\">${this.actions[idx].icon}</md-icon>\n </md-assist-chip>\n `\n })}\n `\n }\n\n async updated(changed: PropertyValues<this>) {\n if (changed.has('actions')) {\n requestAnimationFrame(this.overflownUpdater)\n }\n }\n\n protected willUpdate() {\n const { actions } = this._route.context || {}\n\n if (actions) {\n this.actions = actions.filter((action: any) => !!action)\n }\n }\n\n showMore() {\n openOverlay('context-toolbar-overlay', {\n template: html`<ox-page-action-overlay-template></ox-page-action-overlay-template>`\n })\n }\n}\n"]}
|
|
@@ -1,17 +1,8 @@
|
|
|
1
1
|
import '@material/web/icon/icon.js';
|
|
2
2
|
import '@material/web/chips/assist-chip.js';
|
|
3
3
|
import { LitElement } from 'lit';
|
|
4
|
-
declare
|
|
5
|
-
_storeUnsubscribe: import("redux").Unsubscribe;
|
|
6
|
-
connectedCallback(): void;
|
|
7
|
-
disconnectedCallback(): void;
|
|
8
|
-
stateChanged(_state: unknown): void;
|
|
9
|
-
readonly isConnected: boolean;
|
|
10
|
-
}) & typeof LitElement;
|
|
11
|
-
export declare class PageActionOverlayTemplate extends PageActionOverlayTemplate_base {
|
|
4
|
+
export declare class PageActionOverlayTemplate extends LitElement {
|
|
12
5
|
static get styles(): import("lit").CSSResult[];
|
|
13
|
-
private
|
|
6
|
+
private _route;
|
|
14
7
|
render(): import("lit-html").TemplateResult<1>;
|
|
15
|
-
stateChanged(state: any): void;
|
|
16
8
|
}
|
|
17
|
-
export {};
|
|
@@ -2,16 +2,15 @@ import { __decorate } from "tslib";
|
|
|
2
2
|
import '@material/web/icon/icon.js';
|
|
3
3
|
import '@material/web/chips/assist-chip.js';
|
|
4
4
|
import { css, html, LitElement } from 'lit';
|
|
5
|
-
import { customElement
|
|
6
|
-
import {
|
|
7
|
-
import { store } from '@operato/shell';
|
|
5
|
+
import { customElement } from 'lit/decorators.js';
|
|
6
|
+
import { RouteController } from '@operato/shell';
|
|
8
7
|
import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles';
|
|
9
8
|
import { sleep } from '@operato/utils';
|
|
10
9
|
import { ContextToolbarOverlayStyle } from '../styles/ox-context-toolbar-overlay-style.js';
|
|
11
|
-
let PageActionOverlayTemplate = class PageActionOverlayTemplate extends
|
|
10
|
+
let PageActionOverlayTemplate = class PageActionOverlayTemplate extends LitElement {
|
|
12
11
|
constructor() {
|
|
13
12
|
super(...arguments);
|
|
14
|
-
this.
|
|
13
|
+
this._route = new RouteController(this);
|
|
15
14
|
}
|
|
16
15
|
static get styles() {
|
|
17
16
|
return [
|
|
@@ -50,8 +49,10 @@ let PageActionOverlayTemplate = class PageActionOverlayTemplate extends connect(
|
|
|
50
49
|
];
|
|
51
50
|
}
|
|
52
51
|
render() {
|
|
52
|
+
var _a, _b;
|
|
53
|
+
const actions = ((_b = (_a = this._route.context) === null || _a === void 0 ? void 0 : _a.actions) === null || _b === void 0 ? void 0 : _b.filter((action) => !!action)) || [];
|
|
53
54
|
return html `
|
|
54
|
-
${
|
|
55
|
+
${actions.map(($action, idx) => {
|
|
55
56
|
let { type, title, icon, action, select, href, emphasis } = $action;
|
|
56
57
|
let { raised, danger } = emphasis || {};
|
|
57
58
|
return type == 'text'
|
|
@@ -87,7 +88,7 @@ let PageActionOverlayTemplate = class PageActionOverlayTemplate extends connect(
|
|
|
87
88
|
await sleep(1000); /* waiting for additionla 1 second */
|
|
88
89
|
/* because icon can be changed after sleep, don't use closure 'icon'. */
|
|
89
90
|
if (iconElement) {
|
|
90
|
-
iconElement.textContent = (_a =
|
|
91
|
+
iconElement.textContent = (_a = actions[idx]) === null || _a === void 0 ? void 0 : _a.icon;
|
|
91
92
|
iconElement.removeAttribute('working');
|
|
92
93
|
}
|
|
93
94
|
button.disabled = false;
|
|
@@ -100,14 +101,7 @@ let PageActionOverlayTemplate = class PageActionOverlayTemplate extends connect(
|
|
|
100
101
|
})}
|
|
101
102
|
`;
|
|
102
103
|
}
|
|
103
|
-
stateChanged(state) {
|
|
104
|
-
var _a, _b, _c;
|
|
105
|
-
this.actions = ((_c = (_b = (_a = state.route) === null || _a === void 0 ? void 0 : _a.context) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.filter((action) => !!action)) || [];
|
|
106
|
-
}
|
|
107
104
|
};
|
|
108
|
-
__decorate([
|
|
109
|
-
state()
|
|
110
|
-
], PageActionOverlayTemplate.prototype, "actions", void 0);
|
|
111
105
|
PageActionOverlayTemplate = __decorate([
|
|
112
106
|
customElement('ox-page-action-overlay-template')
|
|
113
107
|
], PageActionOverlayTemplate);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-page-action-overlay-template.js","sourceRoot":"","sources":["../../../src/tools/ox-page-action-overlay-template.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,oCAAoC,CAAA;AAE3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,
|
|
1
|
+
{"version":3,"file":"ox-page-action-overlay-template.js","sourceRoot":"","sources":["../../../src/tools/ox-page-action-overlay-template.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/chips/assist-chip.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { RouteController } from '@operato/shell'\nimport { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'\nimport { sleep } from '@operato/utils'\n\nimport { ContextToolbarOverlayStyle } from '../styles/ox-context-toolbar-overlay-style.js'\n\n@customElement('ox-page-action-overlay-template')\nexport class PageActionOverlayTemplate extends LitElement {\n static get styles() {\n return [\n ScrollbarStyles,\n ButtonContainerStyles,\n ContextToolbarOverlayStyle,\n css`\n :host {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing-small);\n align-items: center;\n }\n\n :host *:focus {\n outline: none;\n }\n\n md-icon[working] {\n animation: rotate 1s linear infinite;\n }\n\n md-assist-chip[icon-only] {\n --md-assist-chip-trailing-space: 0;\n }\n\n @keyframes rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n `\n ]\n }\n\n private _route = new RouteController(this)\n\n render() {\n const actions = this._route.context?.actions?.filter((action: any) => !!action) || []\n\n return html`\n ${actions.map(($action: any, idx: number) => {\n let { type, title, icon, action, select, href, emphasis } = $action as any\n let { raised, danger } = emphasis || {}\n\n return type == 'text'\n ? html` <span>${title}</span> `\n : type == 'select' || (select && select.length > 0)\n ? html`\n <select @change=${action}>\n ${select.map((option: any) => html` <option>${option}</option> `)}\n </select>\n `\n : type == 'link'\n ? html` <a href=${href}>${title}</a> `\n : html`\n <md-assist-chip\n ?icon-only=${type == 'icon' || !title}\n ?elevated=${raised}\n ?danger=${danger}\n label=${title}\n @click=${async (e: MouseEvent) => {\n /* all actions should be bloked for a second */\n const button = e.currentTarget as any\n const iconElement = button.querySelector('[slot=\"icon\"]')\n if (iconElement) {\n iconElement.textContent = 'refresh'\n iconElement.setAttribute('working', true)\n }\n button.disabled = true\n\n try {\n await action()\n } finally {\n await sleep(1000) /* waiting for additionla 1 second */\n\n /* because icon can be changed after sleep, don't use closure 'icon'. */\n if (iconElement) {\n iconElement.textContent = actions[idx]?.icon\n iconElement.removeAttribute('working')\n }\n button.disabled = false\n }\n }}\n >\n <md-icon slot=\"icon\">${icon || 'done_all'}</md-icon>\n </md-assist-chip>\n `\n })}\n `\n }\n}\n"]}
|
|
@@ -1,18 +1,9 @@
|
|
|
1
1
|
import '@material/web/icon/icon.js';
|
|
2
2
|
import '@operato/input/ox-input-search.js';
|
|
3
3
|
import { LitElement } from 'lit';
|
|
4
|
-
declare
|
|
5
|
-
_storeUnsubscribe: import("redux").Unsubscribe;
|
|
6
|
-
connectedCallback(): void;
|
|
7
|
-
disconnectedCallback(): void;
|
|
8
|
-
stateChanged(_state: unknown): void;
|
|
9
|
-
readonly isConnected: boolean;
|
|
10
|
-
}) & typeof LitElement;
|
|
11
|
-
export declare class PageTitleBar extends PageTitleBar_base {
|
|
4
|
+
export declare class PageTitleBar extends LitElement {
|
|
12
5
|
static styles: import("lit").CSSResult[];
|
|
13
|
-
private
|
|
6
|
+
private _route;
|
|
14
7
|
mobile: boolean;
|
|
15
8
|
render(): import("lit-html").TemplateResult<1>;
|
|
16
|
-
stateChanged(state: any): void;
|
|
17
9
|
}
|
|
18
|
-
export {};
|
|
@@ -2,18 +2,18 @@ import { __decorate } from "tslib";
|
|
|
2
2
|
import '@material/web/icon/icon.js';
|
|
3
3
|
import '@operato/input/ox-input-search.js';
|
|
4
4
|
import { css, html, LitElement } from 'lit';
|
|
5
|
-
import { customElement
|
|
6
|
-
import { connect } from 'pwa-helpers';
|
|
5
|
+
import { customElement } from 'lit/decorators.js';
|
|
7
6
|
import { openHelp } from '@operato/help';
|
|
8
|
-
import {
|
|
7
|
+
import { RouteController } from '@operato/shell';
|
|
9
8
|
import { isMobileDevice } from '@operato/utils';
|
|
10
|
-
let PageTitleBar = class PageTitleBar extends
|
|
9
|
+
let PageTitleBar = class PageTitleBar extends LitElement {
|
|
11
10
|
constructor() {
|
|
12
11
|
super(...arguments);
|
|
12
|
+
this._route = new RouteController(this);
|
|
13
13
|
this.mobile = isMobileDevice();
|
|
14
14
|
}
|
|
15
15
|
render() {
|
|
16
|
-
var { search, filter, title, help } = this.context || {};
|
|
16
|
+
var { search, filter, title, help } = this._route.context || {};
|
|
17
17
|
var { value = '', handler: searchHandler, placeholder = '', autofocus = true } = search || {};
|
|
18
18
|
const { handler: filterHandler } = filter || {};
|
|
19
19
|
const { icon, text = title } = typeof title === 'object' ? title : {};
|
|
@@ -48,9 +48,6 @@ let PageTitleBar = class PageTitleBar extends connect(store)(LitElement) {
|
|
|
48
48
|
: html ``}
|
|
49
49
|
`;
|
|
50
50
|
}
|
|
51
|
-
stateChanged(state) {
|
|
52
|
-
this.context = state.route.context;
|
|
53
|
-
}
|
|
54
51
|
};
|
|
55
52
|
PageTitleBar.styles = [
|
|
56
53
|
css `
|
|
@@ -116,9 +113,6 @@ PageTitleBar.styles = [
|
|
|
116
113
|
}
|
|
117
114
|
`
|
|
118
115
|
];
|
|
119
|
-
__decorate([
|
|
120
|
-
state()
|
|
121
|
-
], PageTitleBar.prototype, "context", void 0);
|
|
122
116
|
PageTitleBar = __decorate([
|
|
123
117
|
customElement('ox-page-title-bar')
|
|
124
118
|
], PageTitleBar);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-page-title-bar.js","sourceRoot":"","sources":["../../../src/tools/ox-page-title-bar.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,mCAAmC,CAAA;AAE1C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,
|
|
1
|
+
{"version":3,"file":"ox-page-title-bar.js","sourceRoot":"","sources":["../../../src/tools/ox-page-title-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/input/ox-input-search.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { openHelp } from '@operato/help'\nimport { RouteController } from '@operato/shell'\nimport { isMobileDevice } from '@operato/utils'\n\n@customElement('ox-page-title-bar')\nexport class PageTitleBar extends LitElement {\n static styles = [\n css`\n :host {\n display: flex;\n align-items: center;\n text-transform: capitalize;\n\n --help-icon-color: var(--md-sys-color-on-surface);\n --help-icon-hover-color: var(--md-sys-color-on-surface-variant);\n --help-icon-opacity: 0.2;\n --help-icon-size: 20px;\n\n --md-icon-size: 20px;\n\n --input-search-padding: var(--spacing-small);\n --input-search-font: normal 14px var(--theme-font);\n }\n\n [titler] {\n display: flex;\n padding: var(--spacing-small);\n padding-top: var(--spacing-medium);\n font: var(--context-toolbar-title);\n color: var(--title-text-color);\n }\n\n [titler] > * {\n align-self: center;\n }\n\n [help] {\n opacity: var(--help-icon-opacity);\n font-size: var(--help-icon-size);\n color: var(--help-icon-color);\n }\n\n [help]:hover {\n cursor: help;\n opacity: var(--help-icon-hover-opacity);\n color: var(--help-icon-hover-color);\n }\n\n [search] [help] {\n color: var(--md-sys-color-on-secondary-container);\n }\n\n [search] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n align-self: center;\n color: var(--md-sys-color-primary);\n background-color: var(--md-sys-color-on-primary);\n border-radius: var(--md-sys-shape-corner-full);\n margin-left: auto;\n padding: 0 var(--spacing-medium);\n }\n\n [search] > * {\n align-self: center;\n }\n `\n ]\n\n private _route = new RouteController(this)\n\n mobile = isMobileDevice()\n\n render() {\n var { search, filter, title, help } = this._route.context || ({} as any)\n var { value = '', handler: searchHandler, placeholder = '', autofocus = true } = search || ({} as any)\n const { handler: filterHandler } = filter || ({} as any)\n const { icon, text = title } = typeof title === 'object' ? title : ({} as any)\n const searchable = typeof searchHandler == 'function'\n const filterable = typeof filterHandler == 'function'\n\n if (this.mobile && searchable && title) {\n placeholder ||= title\n title = ''\n }\n\n return html`\n ${title ? html` <div titler>${icon ? html`<md-icon>${icon}</md-icon> ` : html``}${text}</div> ` : html``}\n ${help && title ? html` <md-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</md-icon> ` : html``}\n ${searchable || filterable\n ? html`\n <div search>\n ${searchable\n ? html` <ox-input-search\n .placeholder=${placeholder}\n .value=${value || ''}\n ?autofocus=${autofocus}\n @change=${(e: Event) => {\n searchHandler((e.target as any).value)\n }}\n ></ox-input-search>`\n : html``}\n ${!title && help && searchable\n ? html`<md-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</md-icon>`\n : html``}\n ${filterable ? html`<md-icon @click=${(e: MouseEvent) => filterHandler()}>unfold_more</md-icon>` : html``}\n </div>\n `\n : html``}\n `\n }\n}\n"]}
|
|
@@ -1,17 +1,8 @@
|
|
|
1
1
|
import '@material/web/icon/icon.js';
|
|
2
2
|
import '@operato/input/ox-input-search.js';
|
|
3
3
|
import { LitElement } from 'lit';
|
|
4
|
-
declare
|
|
5
|
-
_storeUnsubscribe: import("redux").Unsubscribe;
|
|
6
|
-
connectedCallback(): void;
|
|
7
|
-
disconnectedCallback(): void;
|
|
8
|
-
stateChanged(_state: unknown): void;
|
|
9
|
-
readonly isConnected: boolean;
|
|
10
|
-
}) & typeof LitElement;
|
|
11
|
-
export declare class TitleBar extends TitleBar_base {
|
|
4
|
+
export declare class TitleBar extends LitElement {
|
|
12
5
|
static styles: import("lit").CSSResult[];
|
|
13
|
-
private
|
|
6
|
+
private _route;
|
|
14
7
|
render(): import("lit-html").TemplateResult<1>;
|
|
15
|
-
stateChanged(state: any): void;
|
|
16
8
|
}
|
|
17
|
-
export {};
|