@operato/context 2.0.0-alpha.46 → 2.0.0-alpha.47
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 +9 -0
- package/dist/src/layouts/ox-context-page-toolbar.d.ts +8 -3
- package/dist/src/layouts/ox-context-page-toolbar.js +6 -3
- package/dist/src/layouts/ox-context-page-toolbar.js.map +1 -1
- package/dist/src/tools/ox-page-action-context-bar.d.ts +9 -1
- package/dist/src/tools/ox-page-action-context-bar.js +21 -18
- package/dist/src/tools/ox-page-action-context-bar.js.map +1 -1
- package/dist/stories/ox-context-page-toolbar-select.stories.d.ts +24 -0
- package/dist/stories/ox-context-page-toolbar-select.stories.js +91 -0
- package/dist/stories/ox-context-page-toolbar-select.stories.js.map +1 -0
- package/dist/stories/ox-context-page-toolbar.stories.d.ts +24 -0
- package/dist/stories/ox-context-page-toolbar.stories.js +86 -0
- package/dist/stories/ox-context-page-toolbar.stories.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +7 -7
- package/src/layouts/ox-context-page-toolbar.ts +9 -3
- package/src/tools/ox-page-action-context-bar.ts +50 -38
- package/stories/ox-context-page-toolbar-select.stories.ts +106 -0
- package/stories/ox-context-page-toolbar.stories.ts +101 -0
- package/themes/app-theme.css +145 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,15 @@
|
|
|
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
|
+
## [2.0.0-alpha.47](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.46...v2.0.0-alpha.47) (2024-03-27)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* storybook 실행 환경 ([6a2940f](https://github.com/hatiolab/operato/commit/6a2940fb89dc26566acdce7cf1781a71cbad61c5))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
## [2.0.0-alpha.46](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.45...v2.0.0-alpha.46) (2024-03-26)
|
|
7
16
|
|
|
8
17
|
**Note:** Version bump only for package @operato/context
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import '@material/mwc-icon';
|
|
2
|
-
import { LitElement } from 'lit';
|
|
2
|
+
import { LitElement, TemplateResult } from 'lit';
|
|
3
|
+
import { TOOL_POSITION } from '@operato/layout';
|
|
3
4
|
declare const ContextPageToolbar_base: (new (...args: any[]) => {
|
|
4
5
|
_storeUnsubscribe: import("redux").Unsubscribe;
|
|
5
6
|
connectedCallback(): void;
|
|
@@ -10,8 +11,12 @@ declare const ContextPageToolbar_base: (new (...args: any[]) => {
|
|
|
10
11
|
export declare class ContextPageToolbar extends ContextPageToolbar_base {
|
|
11
12
|
static get styles(): import("lit").CSSResult[];
|
|
12
13
|
context: any;
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
tools?: {
|
|
15
|
+
position: TOOL_POSITION;
|
|
16
|
+
template: TemplateResult;
|
|
17
|
+
context?: string;
|
|
18
|
+
}[];
|
|
19
|
+
render(): TemplateResult<1>;
|
|
15
20
|
stateChanged(state: any): void;
|
|
16
21
|
}
|
|
17
22
|
export {};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import '@material/mwc-icon';
|
|
3
3
|
import { css, html, LitElement, nothing } from 'lit';
|
|
4
|
-
import { customElement, property
|
|
4
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
5
5
|
import { connect } from 'pwa-helpers/connect-mixin.js';
|
|
6
6
|
import { TOOL_POSITION } from '@operato/layout';
|
|
7
7
|
import { store } from '@operato/shell';
|
|
@@ -74,14 +74,17 @@ let ContextPageToolbar = class ContextPageToolbar extends connect(store)(LitElem
|
|
|
74
74
|
`;
|
|
75
75
|
}
|
|
76
76
|
stateChanged(state) {
|
|
77
|
-
|
|
77
|
+
var _a;
|
|
78
|
+
if (state.context) {
|
|
79
|
+
this.tools = (_a = state.context) === null || _a === void 0 ? void 0 : _a.tools;
|
|
80
|
+
}
|
|
78
81
|
}
|
|
79
82
|
};
|
|
80
83
|
__decorate([
|
|
81
84
|
property({ type: Object })
|
|
82
85
|
], ContextPageToolbar.prototype, "context", void 0);
|
|
83
86
|
__decorate([
|
|
84
|
-
|
|
87
|
+
property({ type: Array })
|
|
85
88
|
], ContextPageToolbar.prototype, "tools", void 0);
|
|
86
89
|
ContextPageToolbar = __decorate([
|
|
87
90
|
customElement('ox-context-page-toolbar')
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-context-page-toolbar.js","sourceRoot":"","sources":["../../../src/layouts/ox-context-page-toolbar.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,
|
|
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/mwc-icon'\n\nimport { css, html, LitElement, TemplateResult, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { TOOL_POSITION } from '@operato/layout'\nimport { store } from '@operato/shell'\n\n@customElement('ox-context-page-toolbar')\nexport class ContextPageToolbar extends connect(store)(LitElement) {\n static get styles() {\n return [\n css`\n :host {\n display: flex;\n flex-direction: row-reverse;\n position: relative;\n\n justify-content: end;\n align-items: center;\n\n --context-action-bar-button-margin: 0px;\n --context-action-bar-more-button-border-radius: 2px;\n\n --mdc-icon-size: 20px;\n --mdc-button-height: 20px;\n --mdc-button-horizontal-padding: 2px;\n }\n\n :host > div {\n display: flex;\n flex-direction: row;\n\n align-items: center;\n }\n\n * {\n cursor: pointer;\n }\n\n mwc-icon {\n background-color: var(--theme-white-color);\n border: 1px solid rgba(var(--primary-color-rgb), 0.5);\n padding: 1px 2px;\n color: var(--primary-color);\n }\n `\n ]\n }\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 ${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 `\n }\n\n stateChanged(state: any) {\n if (state.context) {\n this.tools = state.context?.tools\n }\n }\n}\n"]}
|
|
@@ -11,7 +11,15 @@ declare const PageActionContextBar_base: (new (...args: any[]) => {
|
|
|
11
11
|
}) & typeof LitElement;
|
|
12
12
|
export declare class PageActionContextBar extends PageActionContextBar_base {
|
|
13
13
|
static get styles(): import("lit").CSSResult[];
|
|
14
|
-
actions:
|
|
14
|
+
actions: {
|
|
15
|
+
title: string;
|
|
16
|
+
action: () => void;
|
|
17
|
+
icon: string;
|
|
18
|
+
type: string;
|
|
19
|
+
select: string[];
|
|
20
|
+
href?: string;
|
|
21
|
+
emphasis?: boolean;
|
|
22
|
+
}[];
|
|
15
23
|
private overflown;
|
|
16
24
|
private overflownUpdaterThrottle;
|
|
17
25
|
private resizeCallback;
|
|
@@ -3,7 +3,7 @@ import '@material/mwc-button';
|
|
|
3
3
|
import '@material/mwc-icon';
|
|
4
4
|
import './ox-page-action-overlay-template.js';
|
|
5
5
|
import { css, html, LitElement } from 'lit';
|
|
6
|
-
import { customElement, state } from 'lit/decorators.js';
|
|
6
|
+
import { customElement, property, state } from 'lit/decorators.js';
|
|
7
7
|
import throttle from 'lodash-es/throttle';
|
|
8
8
|
import { connect } from 'pwa-helpers/connect-mixin';
|
|
9
9
|
import { openOverlay } from '@operato/layout';
|
|
@@ -115,23 +115,23 @@ let PageActionContextBar = class PageActionContextBar extends connect(store)(Lit
|
|
|
115
115
|
? html ` <span @click=${action}>${title}</span> `
|
|
116
116
|
: type == 'select' || (select && select.length > 0)
|
|
117
117
|
? html `
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
118
|
+
<select @change=${action}>
|
|
119
|
+
${select.map((option) => html ` <option>${option}</option> `)}
|
|
120
|
+
</select>
|
|
121
|
+
`
|
|
122
122
|
: type == 'link'
|
|
123
123
|
? html ` <a href=${href}>${title}</a> `
|
|
124
124
|
: type == 'icon'
|
|
125
125
|
? html `<mwc-icon @click=${action}>${icon}</mwc-icon>`
|
|
126
126
|
: html `
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
127
|
+
<mwc-button
|
|
128
|
+
label=${title}
|
|
129
|
+
icon=${icon || 'done_all'}
|
|
130
|
+
?dense=${dense}
|
|
131
|
+
?raised=${raised}
|
|
132
|
+
?outlined=${outlined}
|
|
133
|
+
?danger=${danger}
|
|
134
|
+
@click=${async (e) => {
|
|
135
135
|
var _a;
|
|
136
136
|
/* all actions should be bloked for a second */
|
|
137
137
|
const button = e.currentTarget;
|
|
@@ -149,8 +149,8 @@ let PageActionContextBar = class PageActionContextBar extends connect(store)(Lit
|
|
|
149
149
|
button.removeAttribute('working');
|
|
150
150
|
}
|
|
151
151
|
}}
|
|
152
|
-
|
|
153
|
-
|
|
152
|
+
></mwc-button>
|
|
153
|
+
`;
|
|
154
154
|
})}
|
|
155
155
|
`;
|
|
156
156
|
}
|
|
@@ -160,8 +160,11 @@ let PageActionContextBar = class PageActionContextBar extends connect(store)(Lit
|
|
|
160
160
|
}
|
|
161
161
|
}
|
|
162
162
|
stateChanged(state) {
|
|
163
|
-
var _a
|
|
164
|
-
|
|
163
|
+
var _a;
|
|
164
|
+
const { actions } = ((_a = state.route) === null || _a === void 0 ? void 0 : _a.context) || {};
|
|
165
|
+
if (actions) {
|
|
166
|
+
this.actions = actions.filter((action) => !!action);
|
|
167
|
+
}
|
|
165
168
|
}
|
|
166
169
|
showMore() {
|
|
167
170
|
openOverlay('context-toolbar-overlay', {
|
|
@@ -170,7 +173,7 @@ let PageActionContextBar = class PageActionContextBar extends connect(store)(Lit
|
|
|
170
173
|
}
|
|
171
174
|
};
|
|
172
175
|
__decorate([
|
|
173
|
-
|
|
176
|
+
property({ type: Array })
|
|
174
177
|
], PageActionContextBar.prototype, "actions", void 0);
|
|
175
178
|
__decorate([
|
|
176
179
|
state()
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-page-action-context-bar.js","sourceRoot":"","sources":["../../../src/tools/ox-page-action-context-bar.ts"],"names":[],"mappings":";AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,oBAAoB,CAAA;AAC3B,OAAO,sCAAsC,CAAA;AAE7C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,
|
|
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/mwc-button'\nimport '@material/mwc-icon'\nimport './ox-page-action-overlay-template.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport throttle from 'lodash-es/throttle'\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { openOverlay } from '@operato/layout'\nimport { store } from '@operato/shell'\nimport { sleep } from '@operato/utils'\n\n@customElement('ox-page-action-context-bar')\nexport class PageActionContextBar extends connect(store)(LitElement) {\n static get styles() {\n return [\n css`\n :host {\n display: flex;\n overflow: hidden;\n position: relative;\n }\n\n :host *:focus {\n outline: none;\n }\n\n mwc-button {\n white-space: nowrap;\n margin: var(--context-action-bar-button-margin);\n border-radius: var(--context-action-bar-more-button-border-radius);\n }\n\n [danger] {\n --mdc-theme-primary: var(--mdc-danger-button-primary-color);\n --mdc-button-outline-color: var(--mdc-danger-button-outline-color);\n }\n\n [more] {\n position: absolute;\n top: 0;\n right: 38px;\n background-color: var(--context-action-bar-more-button-background-color);\n box-shadow: -2px 0px 2px 1px rgba(0, 0, 0, 0.2);\n padding: var(--context-action-bar-more-button-padding);\n color: var(--context-action-bar-more-button-color);\n font-size: 2rem;\n }\n\n mwc-icon {\n background-color: var(--theme-white-color);\n border: 1px solid rgba(var(--primary-color-rgb), 0.5);\n padding: 1px 2px;\n color: var(--primary-color);\n }\n\n @media screen and (max-width: 460px) {\n mwc-button {\n --mdc-button-horizontal-padding: var(--padding-default);\n --mdc-shape-small: var(--context-action-bar-more-button-border-radius);\n }\n\n [more] {\n position: absolute;\n margin-top: -10px;\n right: 0px;\n padding: var(--padding-default);\n font-size: 2rem;\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 @state() private overflown: boolean = false\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.scrollWidth > this.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 html`\n ${this.renderActions()}\n ${this.overflown ? html` <mwc-icon more @click=${this.showMore.bind(this)}>more_horiz</mwc-icon> ` : html``}\n `\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 { outlined, raised, dense, 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 : type == 'icon'\n ? html`<mwc-icon @click=${action}>${icon}</mwc-icon>`\n : html`\n <mwc-button\n label=${title}\n icon=${icon || 'done_all'}\n ?dense=${dense}\n ?raised=${raised}\n ?outlined=${outlined}\n ?danger=${danger}\n @click=${async (e: MouseEvent) => {\n /* all actions should be bloked for a second */\n const button = e.currentTarget as any\n button.icon = 'rotate_right'\n button.setAttribute('working', true)\n button.disabled = true\n\n try {\n await action()\n } finally {\n await sleep(1000)\n button.disabled = false\n /* because icon can be changed after sleep, don't use closure 'icon'. */\n button.icon = this.actions[idx]?.icon || 'done_all'\n button.removeAttribute('working')\n }\n }}\n ></mwc-button>\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"]}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import '@material/mwc-icon';
|
|
2
|
+
import '../src/layouts/ox-context-page-toolbar.js';
|
|
3
|
+
import '../src/tools/ox-page-action-context-bar.js';
|
|
4
|
+
import '@operato/styles';
|
|
5
|
+
import { TemplateResult } from 'lit';
|
|
6
|
+
declare const _default: {
|
|
7
|
+
title: string;
|
|
8
|
+
component: string;
|
|
9
|
+
argTypes: {
|
|
10
|
+
label: {
|
|
11
|
+
control: string;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
export default _default;
|
|
16
|
+
interface Story<T> {
|
|
17
|
+
(args: T): TemplateResult;
|
|
18
|
+
args?: Partial<T>;
|
|
19
|
+
argTypes?: Record<string, unknown>;
|
|
20
|
+
}
|
|
21
|
+
interface ArgTypes {
|
|
22
|
+
label?: string;
|
|
23
|
+
}
|
|
24
|
+
export declare const Regular: Story<ArgTypes>;
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import '@material/mwc-icon';
|
|
2
|
+
import '../src/layouts/ox-context-page-toolbar.js';
|
|
3
|
+
import '../src/tools/ox-page-action-context-bar.js';
|
|
4
|
+
import { CommonHeaderStyles } from '@operato/styles';
|
|
5
|
+
import { TOOL_POSITION } from '@operato/layout';
|
|
6
|
+
import '@operato/styles';
|
|
7
|
+
import { html } from 'lit';
|
|
8
|
+
export default {
|
|
9
|
+
title: 'ox-context-page-toolbar-select',
|
|
10
|
+
component: 'ox-context-page-toolbar',
|
|
11
|
+
argTypes: {
|
|
12
|
+
label: { control: 'string' }
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
const Template = ({ label = '' }) => html `
|
|
16
|
+
<link href="/themes/app-theme.css" rel="stylesheet" />
|
|
17
|
+
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
|
|
18
|
+
|
|
19
|
+
<script>
|
|
20
|
+
const store
|
|
21
|
+
</script>
|
|
22
|
+
|
|
23
|
+
<style>
|
|
24
|
+
body {
|
|
25
|
+
background-color: white;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
${CommonHeaderStyles.cssText}
|
|
29
|
+
</style>
|
|
30
|
+
|
|
31
|
+
<div style="height:600px;">
|
|
32
|
+
<div class="header">
|
|
33
|
+
<div class="title">
|
|
34
|
+
<mwc-icon>summarize</mwc-icon>
|
|
35
|
+
${label}
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
<div class="filters">
|
|
39
|
+
<label>Filter</label><input type="text"></input>
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
<ox-context-page-toolbar class="actions"
|
|
43
|
+
.tools=${[
|
|
44
|
+
{
|
|
45
|
+
position: TOOL_POSITION.FRONT,
|
|
46
|
+
template: html ` <mwc-icon>download</mwc-icon> `,
|
|
47
|
+
context: 'exportable'
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
position: TOOL_POSITION.FRONT,
|
|
51
|
+
template: html ` <mwc-icon>upload</mwc-icon> `,
|
|
52
|
+
context: 'importable'
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
position: TOOL_POSITION.CENTER,
|
|
56
|
+
template: html `<ox-page-action-context-bar
|
|
57
|
+
.actions=${[
|
|
58
|
+
{
|
|
59
|
+
title: 'save',
|
|
60
|
+
action: () => { },
|
|
61
|
+
icon: 'save'
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
title: 'copy',
|
|
65
|
+
action: () => { },
|
|
66
|
+
icon: 'content_copy'
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
title: 'delete',
|
|
70
|
+
action: () => { },
|
|
71
|
+
icon: 'delete'
|
|
72
|
+
}
|
|
73
|
+
]}
|
|
74
|
+
></ox-page-action-context-bar>`
|
|
75
|
+
}
|
|
76
|
+
]}
|
|
77
|
+
.context=${{
|
|
78
|
+
exportable: true,
|
|
79
|
+
importable: true,
|
|
80
|
+
toolbar: false
|
|
81
|
+
}}
|
|
82
|
+
|
|
83
|
+
}> </ox-context-page-toolbar>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
`;
|
|
87
|
+
export const Regular = Template.bind({});
|
|
88
|
+
Regular.args = {
|
|
89
|
+
label: 'common header styles'
|
|
90
|
+
};
|
|
91
|
+
//# sourceMappingURL=ox-context-page-toolbar-select.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-context-page-toolbar-select.stories.js","sourceRoot":"","sources":["../../stories/ox-context-page-toolbar-select.stories.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,2CAA2C,CAAA;AAClD,OAAO,4CAA4C,CAAA;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAG/C,OAAO,iBAAiB,CAAA;AAExB,OAAO,EAAO,IAAI,EAA0B,MAAM,KAAK,CAAA;AAEvD,eAAe;IACb,KAAK,EAAE,gCAAgC;IACvC,SAAS,EAAE,yBAAyB;IACpC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC7B;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,EAAE,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;MAa9D,kBAAkB,CAAC,OAAO;;;;;;;UAOtB,KAAK;;;;;;;;eAQA;IACP;QACE,QAAQ,EAAE,aAAa,CAAC,KAAK;QAC7B,QAAQ,EAAE,IAAI,CAAA,iCAAiC;QAC/C,OAAO,EAAE,YAAY;KACtB;IACD;QACE,QAAQ,EAAE,aAAa,CAAC,KAAK;QAC7B,QAAQ,EAAE,IAAI,CAAA,+BAA+B;QAC7C,OAAO,EAAE,YAAY;KACtB;IACD;QACE,QAAQ,EAAE,aAAa,CAAC,MAAM;QAC9B,QAAQ,EAAE,IAAI,CAAA;uBACD;YACT;gBACE,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,MAAM;aACb;YACD;gBACE,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,cAAc;aACrB;YACD;gBACE,KAAK,EAAE,QAAQ;gBACf,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,QAAQ;aACf;SACF;yCAC4B;KAChC;CACF;iBACU;IACT,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,KAAK;CACf;;;;;CAKN,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,sBAAsB;CAC9B,CAAA","sourcesContent":["import '@material/mwc-icon'\nimport '../src/layouts/ox-context-page-toolbar.js'\nimport '../src/tools/ox-page-action-context-bar.js'\nimport { CommonHeaderStyles } from '@operato/styles'\nimport { TOOL_POSITION } from '@operato/layout'\nimport { store } from '@operato/shell'\n\nimport '@operato/styles'\n\nimport { css, html, render, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-context-page-toolbar-select',\n component: 'ox-context-page-toolbar',\n argTypes: {\n label: { control: 'string' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n label?: string\n}\n\nconst Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n\n <script>\n const store\n </script>\n\n <style>\n body {\n background-color: white;\n }\n\n ${CommonHeaderStyles.cssText}\n </style>\n\n <div style=\"height:600px;\">\n <div class=\"header\">\n <div class=\"title\">\n <mwc-icon>summarize</mwc-icon>\n ${label}\n </div>\n\n <div class=\"filters\">\n <label>Filter</label><input type=\"text\"></input>\n </div>\n\n <ox-context-page-toolbar class=\"actions\" \n .tools=${[\n {\n position: TOOL_POSITION.FRONT,\n template: html` <mwc-icon>download</mwc-icon> `,\n context: 'exportable'\n },\n {\n position: TOOL_POSITION.FRONT,\n template: html` <mwc-icon>upload</mwc-icon> `,\n context: 'importable'\n },\n {\n position: TOOL_POSITION.CENTER,\n template: html`<ox-page-action-context-bar\n .actions=${[\n {\n title: 'save',\n action: () => {},\n icon: 'save'\n },\n {\n title: 'copy',\n action: () => {},\n icon: 'content_copy'\n },\n {\n title: 'delete',\n action: () => {},\n icon: 'delete'\n }\n ]}\n ></ox-page-action-context-bar>`\n }\n ]}\n .context=${{\n exportable: true,\n importable: true,\n toolbar: false\n }}\n \n }> </ox-context-page-toolbar>\n </div>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n label: 'common header styles'\n}\n"]}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import '@material/mwc-icon';
|
|
2
|
+
import '../src/layouts/ox-context-page-toolbar.js';
|
|
3
|
+
import '../src/tools/ox-page-action-context-bar.js';
|
|
4
|
+
import '@operato/styles';
|
|
5
|
+
import { TemplateResult } from 'lit';
|
|
6
|
+
declare const _default: {
|
|
7
|
+
title: string;
|
|
8
|
+
component: string;
|
|
9
|
+
argTypes: {
|
|
10
|
+
label: {
|
|
11
|
+
control: string;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
export default _default;
|
|
16
|
+
interface Story<T> {
|
|
17
|
+
(args: T): TemplateResult;
|
|
18
|
+
args?: Partial<T>;
|
|
19
|
+
argTypes?: Record<string, unknown>;
|
|
20
|
+
}
|
|
21
|
+
interface ArgTypes {
|
|
22
|
+
label?: string;
|
|
23
|
+
}
|
|
24
|
+
export declare const Regular: Story<ArgTypes>;
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import '@material/mwc-icon';
|
|
2
|
+
import '../src/layouts/ox-context-page-toolbar.js';
|
|
3
|
+
import '../src/tools/ox-page-action-context-bar.js';
|
|
4
|
+
import { CommonHeaderStyles } from '@operato/styles';
|
|
5
|
+
import { TOOL_POSITION } from '@operato/layout';
|
|
6
|
+
import '@operato/styles';
|
|
7
|
+
import { html } from 'lit';
|
|
8
|
+
export default {
|
|
9
|
+
title: 'ox-context-page-toolbar',
|
|
10
|
+
component: 'ox-context-page-toolbar',
|
|
11
|
+
argTypes: {
|
|
12
|
+
label: { control: 'string' }
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
const Template = ({ label = '' }) => html `
|
|
16
|
+
<link href="/themes/app-theme.css" rel="stylesheet" />
|
|
17
|
+
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
|
|
18
|
+
|
|
19
|
+
<script>
|
|
20
|
+
const store
|
|
21
|
+
</script>
|
|
22
|
+
|
|
23
|
+
<style>
|
|
24
|
+
body {
|
|
25
|
+
background-color: white;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
${CommonHeaderStyles.cssText}
|
|
29
|
+
</style>
|
|
30
|
+
|
|
31
|
+
<div style="height:600px;">
|
|
32
|
+
<div class="header">
|
|
33
|
+
<div class="title">
|
|
34
|
+
<mwc-icon>summarize</mwc-icon>
|
|
35
|
+
${label}
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
<div class="filters">
|
|
39
|
+
<label>Filter</label><input type="text"></input>
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
<ox-context-page-toolbar class="actions"
|
|
43
|
+
.tools=${[
|
|
44
|
+
{
|
|
45
|
+
position: TOOL_POSITION.FRONT,
|
|
46
|
+
template: html ` <mwc-icon>download</mwc-icon> `,
|
|
47
|
+
context: 'exportable'
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
position: TOOL_POSITION.FRONT,
|
|
51
|
+
template: html ` <mwc-icon>upload</mwc-icon> `,
|
|
52
|
+
context: 'importable'
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
position: TOOL_POSITION.CENTER,
|
|
56
|
+
template: html `<ox-page-action-context-bar
|
|
57
|
+
.actions=${[
|
|
58
|
+
{
|
|
59
|
+
title: 'smile',
|
|
60
|
+
action: () => { },
|
|
61
|
+
select: ['', 'delete', 'hahaha', 'hohoho']
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
title: 'save',
|
|
65
|
+
action: () => { },
|
|
66
|
+
icon: 'save'
|
|
67
|
+
}
|
|
68
|
+
]}
|
|
69
|
+
></ox-page-action-context-bar>`
|
|
70
|
+
}
|
|
71
|
+
]}
|
|
72
|
+
.context=${{
|
|
73
|
+
exportable: true,
|
|
74
|
+
importable: true,
|
|
75
|
+
toolbar: false
|
|
76
|
+
}}
|
|
77
|
+
|
|
78
|
+
}> </ox-context-page-toolbar>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
`;
|
|
82
|
+
export const Regular = Template.bind({});
|
|
83
|
+
Regular.args = {
|
|
84
|
+
label: 'common header styles'
|
|
85
|
+
};
|
|
86
|
+
//# sourceMappingURL=ox-context-page-toolbar.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-context-page-toolbar.stories.js","sourceRoot":"","sources":["../../stories/ox-context-page-toolbar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,2CAA2C,CAAA;AAClD,OAAO,4CAA4C,CAAA;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAG/C,OAAO,iBAAiB,CAAA;AAExB,OAAO,EAAO,IAAI,EAA0B,MAAM,KAAK,CAAA;AAEvD,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,yBAAyB;IACpC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC7B;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,EAAE,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;MAa9D,kBAAkB,CAAC,OAAO;;;;;;;UAOtB,KAAK;;;;;;;;eAQA;IACP;QACE,QAAQ,EAAE,aAAa,CAAC,KAAK;QAC7B,QAAQ,EAAE,IAAI,CAAA,iCAAiC;QAC/C,OAAO,EAAE,YAAY;KACtB;IACD;QACE,QAAQ,EAAE,aAAa,CAAC,KAAK;QAC7B,QAAQ,EAAE,IAAI,CAAA,+BAA+B;QAC7C,OAAO,EAAE,YAAY;KACtB;IACD;QACE,QAAQ,EAAE,aAAa,CAAC,MAAM;QAC9B,QAAQ,EAAE,IAAI,CAAA;uBACD;YACT;gBACE,KAAK,EAAE,OAAO;gBACd,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,MAAM,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC;aAC3C;YACD;gBACE,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,MAAM;aACb;SACF;yCAC4B;KAChC;CACF;iBACU;IACT,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,KAAK;CACf;;;;;CAKN,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,sBAAsB;CAC9B,CAAA","sourcesContent":["import '@material/mwc-icon'\nimport '../src/layouts/ox-context-page-toolbar.js'\nimport '../src/tools/ox-page-action-context-bar.js'\nimport { CommonHeaderStyles } from '@operato/styles'\nimport { TOOL_POSITION } from '@operato/layout'\nimport { store } from '@operato/shell'\n\nimport '@operato/styles'\n\nimport { css, html, render, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-context-page-toolbar',\n component: 'ox-context-page-toolbar',\n argTypes: {\n label: { control: 'string' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n label?: string\n}\n\nconst Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n\n <script>\n const store\n </script>\n\n <style>\n body {\n background-color: white;\n }\n\n ${CommonHeaderStyles.cssText}\n </style>\n\n <div style=\"height:600px;\">\n <div class=\"header\">\n <div class=\"title\">\n <mwc-icon>summarize</mwc-icon>\n ${label}\n </div>\n\n <div class=\"filters\">\n <label>Filter</label><input type=\"text\"></input>\n </div>\n\n <ox-context-page-toolbar class=\"actions\" \n .tools=${[\n {\n position: TOOL_POSITION.FRONT,\n template: html` <mwc-icon>download</mwc-icon> `,\n context: 'exportable'\n },\n {\n position: TOOL_POSITION.FRONT,\n template: html` <mwc-icon>upload</mwc-icon> `,\n context: 'importable'\n },\n {\n position: TOOL_POSITION.CENTER,\n template: html`<ox-page-action-context-bar\n .actions=${[\n {\n title: 'smile',\n action: () => {},\n select: ['', 'delete', 'hahaha', 'hohoho']\n },\n {\n title: 'save',\n action: () => {},\n icon: 'save'\n }\n ]}\n ></ox-page-action-context-bar>`\n }\n ]}\n .context=${{\n exportable: true,\n importable: true,\n toolbar: false\n }}\n \n }> </ox-context-page-toolbar>\n </div>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n label: 'common header styles'\n}\n"]}
|