@operato/layout 8.0.3 → 9.0.0-beta.10
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 +81 -13
- package/dist/src/components/ox-resize-splitter.js +25 -4
- package/dist/src/components/ox-resize-splitter.js.map +1 -1
- package/dist/src/components/ox-split-pane.js +61 -25
- package/dist/src/components/ox-split-pane.js.map +1 -1
- package/dist/src/index.d.ts +4 -4
- package/dist/src/index.js +4 -4
- package/dist/src/index.js.map +1 -1
- package/dist/src/initializer.js +4 -4
- package/dist/src/initializer.js.map +1 -1
- package/dist/src/layouts/ox-aside-bar.js +27 -7
- package/dist/src/layouts/ox-aside-bar.js.map +1 -1
- package/dist/src/layouts/ox-footer-bar.js +26 -6
- package/dist/src/layouts/ox-footer-bar.js.map +1 -1
- package/dist/src/layouts/ox-header-bar.js +26 -6
- package/dist/src/layouts/ox-header-bar.js.map +1 -1
- package/dist/src/layouts/ox-nav-bar.js +27 -7
- package/dist/src/layouts/ox-nav-bar.js.map +1 -1
- package/dist/src/layouts/ox-page-footer-bar.js +26 -6
- package/dist/src/layouts/ox-page-footer-bar.js.map +1 -1
- package/dist/src/layouts/ox-page-header-bar.js +26 -6
- package/dist/src/layouts/ox-page-header-bar.js.map +1 -1
- package/dist/src/layouts/ox-snack-bar.js +32 -6
- package/dist/src/layouts/ox-snack-bar.js.map +1 -1
- package/dist/src/reducers/layout.d.ts +1 -1
- package/dist/src/reducers/layout.js +1 -1
- package/dist/src/reducers/layout.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +15 -14
package/CHANGELOG.md
CHANGED
|
@@ -3,7 +3,16 @@
|
|
|
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
|
-
|
|
6
|
+
## [9.0.0-beta.10](https://github.com/hatiolab/operato/compare/v9.0.0-beta.9...v9.0.0-beta.10) (2025-01-25)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* tweak tsconfig.json ([3c424b1](https://github.com/hatiolab/operato/commit/3c424b18d046f95d5619076d113d49a4b4dc9bbb))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## [9.0.0-beta.6](https://github.com/hatiolab/operato/compare/v9.0.0-beta.5...v9.0.0-beta.6) (2025-01-20)
|
|
7
16
|
|
|
8
17
|
**Note:** Version bump only for package @operato/layout
|
|
9
18
|
|
|
@@ -11,7 +20,25 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
11
20
|
|
|
12
21
|
|
|
13
22
|
|
|
14
|
-
|
|
23
|
+
## [9.0.0-beta.5](https://github.com/hatiolab/operato/compare/v9.0.0-beta.4...v9.0.0-beta.5) (2025-01-20)
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
### :bug: Bug Fix
|
|
27
|
+
|
|
28
|
+
* esm module ([1319b00](https://github.com/hatiolab/operato/commit/1319b00d6955a514f63b3469fb514a28f84168a2))
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
## [9.0.0-beta.4](https://github.com/hatiolab/operato/compare/v9.0.0-beta.3...v9.0.0-beta.4) (2025-01-20)
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
### :bug: Bug Fix
|
|
36
|
+
|
|
37
|
+
* esm module ([0402232](https://github.com/hatiolab/operato/commit/04022327fa47eac64eaf3c56eeec55b9ace13e0e))
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
## [9.0.0-beta.0](https://github.com/hatiolab/operato/compare/v8.0.0-beta.11...v9.0.0-beta.0) (2025-01-13)
|
|
15
42
|
|
|
16
43
|
**Note:** Version bump only for package @operato/layout
|
|
17
44
|
|
|
@@ -19,7 +46,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
19
46
|
|
|
20
47
|
|
|
21
48
|
|
|
22
|
-
## [8.0.0](https://github.com/hatiolab/operato/compare/
|
|
49
|
+
## [8.0.0-beta.5](https://github.com/hatiolab/operato/compare/v8.0.0-beta.4...v8.0.0-beta.5) (2025-01-10)
|
|
23
50
|
|
|
24
51
|
**Note:** Version bump only for package @operato/layout
|
|
25
52
|
|
|
@@ -27,17 +54,25 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
27
54
|
|
|
28
55
|
|
|
29
56
|
|
|
30
|
-
|
|
57
|
+
## [8.0.0-beta.2](https://github.com/hatiolab/operato/compare/v8.0.0-beta.1...v8.0.0-beta.2) (2025-01-08)
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
### :bug: Bug Fix
|
|
61
|
+
|
|
62
|
+
* typo .npmignore ([d9c0c8c](https://github.com/hatiolab/operato/commit/d9c0c8c79abc688c3c2cfb6c37fcb689483a5977))
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
## [8.0.0-beta.1](https://github.com/hatiolab/operato/compare/v8.0.0-beta.0...v8.0.0-beta.1) (2025-01-08)
|
|
31
67
|
|
|
32
68
|
|
|
33
69
|
### :bug: Bug Fix
|
|
34
70
|
|
|
35
|
-
* missing .npmignore ([
|
|
36
|
-
* typo .npmignore ([df91cae](https://github.com/hatiolab/operato/commit/df91caea0f5938a3febd9307184e5b036a65e2bd))
|
|
71
|
+
* missing .npmignore ([be05985](https://github.com/hatiolab/operato/commit/be05985abfae4af53501f718dd52932099f7fbcb))
|
|
37
72
|
|
|
38
73
|
|
|
39
74
|
|
|
40
|
-
|
|
75
|
+
## [8.0.0-beta.0](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.56...v8.0.0-beta.0) (2025-01-07)
|
|
41
76
|
|
|
42
77
|
**Note:** Version bump only for package @operato/layout
|
|
43
78
|
|
|
@@ -45,7 +80,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
45
80
|
|
|
46
81
|
|
|
47
82
|
|
|
48
|
-
|
|
83
|
+
## [8.0.0-alpha.51](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.50...v8.0.0-alpha.51) (2024-11-29)
|
|
49
84
|
|
|
50
85
|
**Note:** Version bump only for package @operato/layout
|
|
51
86
|
|
|
@@ -53,7 +88,16 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
53
88
|
|
|
54
89
|
|
|
55
90
|
|
|
56
|
-
|
|
91
|
+
## [8.0.0-alpha.50](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.49...v8.0.0-alpha.50) (2024-11-16)
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
### :bug: Bug Fix
|
|
95
|
+
|
|
96
|
+
* button text capitalize ([4578e09](https://github.com/hatiolab/operato/commit/4578e096bb4aa0f689dd4f2e3b12cd159be55731))
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
## [8.0.0-alpha.41](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.40...v8.0.0-alpha.41) (2024-10-21)
|
|
57
101
|
|
|
58
102
|
**Note:** Version bump only for package @operato/layout
|
|
59
103
|
|
|
@@ -61,16 +105,40 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
61
105
|
|
|
62
106
|
|
|
63
107
|
|
|
64
|
-
|
|
108
|
+
## [8.0.0-alpha.37](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.36...v8.0.0-alpha.37) (2024-10-20)
|
|
65
109
|
|
|
66
110
|
|
|
67
111
|
### :bug: Bug Fix
|
|
68
112
|
|
|
69
|
-
*
|
|
113
|
+
* update dev-dependencies version ([d6fe342](https://github.com/hatiolab/operato/commit/d6fe342de738c6bad3528550a862b5a1d2573161))
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
## [8.0.0-alpha.33](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.32...v8.0.0-alpha.33) (2024-10-14)
|
|
118
|
+
|
|
119
|
+
**Note:** Version bump only for package @operato/layout
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
## [8.0.0-alpha.29](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.28...v8.0.0-alpha.29) (2024-10-10)
|
|
126
|
+
|
|
127
|
+
**Note:** Version bump only for package @operato/layout
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
## [8.0.0-alpha.27](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.26...v8.0.0-alpha.27) (2024-10-06)
|
|
134
|
+
|
|
135
|
+
**Note:** Version bump only for package @operato/layout
|
|
136
|
+
|
|
137
|
+
|
|
70
138
|
|
|
71
139
|
|
|
72
140
|
|
|
73
|
-
|
|
141
|
+
## [8.0.0-alpha.4](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.3...v8.0.0-alpha.4) (2024-09-07)
|
|
74
142
|
|
|
75
143
|
**Note:** Version bump only for package @operato/layout
|
|
76
144
|
|
|
@@ -78,7 +146,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
78
146
|
|
|
79
147
|
|
|
80
148
|
|
|
81
|
-
|
|
149
|
+
## [8.0.0-alpha.0](https://github.com/hatiolab/operato/compare/v7.1.1...v8.0.0-alpha.0) (2024-09-01)
|
|
82
150
|
|
|
83
151
|
**Note:** Version bump only for package @operato/layout
|
|
84
152
|
|
|
@@ -4,8 +4,24 @@ import { customElement } from 'lit/decorators.js';
|
|
|
4
4
|
let ResizeSplitter = class ResizeSplitter extends LitElement {
|
|
5
5
|
constructor() {
|
|
6
6
|
super(...arguments);
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
Object.defineProperty(this, "dragstart", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
configurable: true,
|
|
10
|
+
writable: true,
|
|
11
|
+
value: void 0
|
|
12
|
+
});
|
|
13
|
+
Object.defineProperty(this, "onMouseMoveHandler", {
|
|
14
|
+
enumerable: true,
|
|
15
|
+
configurable: true,
|
|
16
|
+
writable: true,
|
|
17
|
+
value: this._throttled(100, this.onMouseMove.bind(this))
|
|
18
|
+
}); // this.onMouseMove.bind(this)
|
|
19
|
+
Object.defineProperty(this, "onMouseUpHandler", {
|
|
20
|
+
enumerable: true,
|
|
21
|
+
configurable: true,
|
|
22
|
+
writable: true,
|
|
23
|
+
value: this.onMouseUp.bind(this)
|
|
24
|
+
});
|
|
9
25
|
}
|
|
10
26
|
connectedCallback() {
|
|
11
27
|
super.connectedCallback();
|
|
@@ -93,7 +109,11 @@ let ResizeSplitter = class ResizeSplitter extends LitElement {
|
|
|
93
109
|
e.stopPropagation();
|
|
94
110
|
}
|
|
95
111
|
};
|
|
96
|
-
ResizeSplitter
|
|
112
|
+
Object.defineProperty(ResizeSplitter, "styles", {
|
|
113
|
+
enumerable: true,
|
|
114
|
+
configurable: true,
|
|
115
|
+
writable: true,
|
|
116
|
+
value: css `
|
|
97
117
|
:host {
|
|
98
118
|
position: relative;
|
|
99
119
|
opacity: 0.7;
|
|
@@ -109,7 +129,8 @@ ResizeSplitter.styles = css `
|
|
|
109
129
|
width: 100%;
|
|
110
130
|
height: 100%;
|
|
111
131
|
}
|
|
112
|
-
|
|
132
|
+
`
|
|
133
|
+
});
|
|
113
134
|
ResizeSplitter = __decorate([
|
|
114
135
|
customElement('ox-resize-splitter')
|
|
115
136
|
], ResizeSplitter);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-resize-splitter.js","sourceRoot":"","sources":["../../../src/components/ox-resize-splitter.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE3C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAG1C,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;
|
|
1
|
+
{"version":3,"file":"ox-resize-splitter.js","sourceRoot":"","sources":["../../../src/components/ox-resize-splitter.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html } from 'lit'\n\nimport { customElement } from 'lit/decorators.js'\n\n@customElement('ox-resize-splitter')\nexport class ResizeSplitter extends LitElement {\n static styles = css`\n :host {\n position: relative;\n opacity: 0.7;\n background-color: var(--splitter-background-color);\n }\n\n :host(:hover) {\n background-color: var(--splitter-hover-background-color);\n }\n\n div {\n position: absolute;\n width: 100%;\n height: 100%;\n }\n `\n\n private dragstart?: { x: number; y: number }\n\n connectedCallback() {\n super.connectedCallback()\n\n if (this.hasAttribute('vertical')) {\n this.style.width = '3px'\n this.style.height = '100%'\n this.style.cursor = 'col-resize'\n } else {\n this.style.width = '100%'\n this.style.height = '3px'\n this.style.cursor = 'row-resize'\n }\n }\n\n render() {\n return html` <div @mousedown=${(e: MouseEvent) => this.onMouseDown(e)}></div> `\n }\n\n // TODO onDrag 이벤트가 계속 발생하므로 처리하는 성능 저하됨. 그래서 throttling 하도록 함\n _throttled(delay: number, fn: (...args: any) => void) {\n let lastCall = 0\n return function (...args: any) {\n const now = new Date().getTime()\n if (now - lastCall < delay) {\n return\n }\n lastCall = now\n return fn(...args)\n }\n }\n\n private onMouseDown(e: MouseEvent) {\n this.dragstart = {\n x: e.clientX,\n y: e.clientY\n }\n\n this.dispatchEvent(\n new CustomEvent('splitter-dragstart', {\n bubbles: true,\n composed: true\n })\n )\n\n window.addEventListener('mousemove', this.onMouseMoveHandler)\n window.addEventListener('mouseup', this.onMouseUpHandler)\n\n e.stopPropagation()\n }\n\n onMouseMoveHandler = this._throttled(100, this.onMouseMove.bind(this)) // this.onMouseMove.bind(this)\n onMouseUpHandler = this.onMouseUp.bind(this)\n\n private onMouseMove(e: MouseEvent) {\n if (!this.dragstart) {\n return\n }\n\n e.preventDefault()\n\n this.dispatchEvent(\n new CustomEvent('splitter-drag', {\n bubbles: true,\n composed: true,\n detail: {\n x: e.clientX - this.dragstart!.x,\n y: e.clientY - this.dragstart!.y\n }\n })\n )\n requestAnimationFrame(() => {\n dispatchEvent(new Event('resize'))\n })\n\n if (this.hasAttribute('vertical')) {\n document.body.style.cursor = 'col-resize'\n } else {\n document.body.style.cursor = 'row-resize'\n }\n\n document.body.style.userSelect = 'none'\n\n e.stopPropagation()\n }\n\n private onMouseUp(e: MouseEvent) {\n window.removeEventListener('mousemove', this.onMouseMoveHandler)\n window.removeEventListener('mouseup', this.onMouseUpHandler)\n\n this.dispatchEvent(\n new CustomEvent('splitter-dragend', {\n bubbles: true,\n composed: true,\n detail: {\n x: e.clientX - this.dragstart!.x,\n y: e.clientY - this.dragstart!.y\n }\n })\n )\n\n requestAnimationFrame(() => {\n dispatchEvent(new Event('resize'))\n delete this.dragstart\n })\n\n document.body.style.cursor = ''\n document.body.style.userSelect = ''\n\n e.stopPropagation()\n }\n}\n"]}
|
|
@@ -4,31 +4,62 @@ import { customElement, property, query } from 'lit/decorators.js';
|
|
|
4
4
|
let OxSplitPane = class OxSplitPane extends LitElement {
|
|
5
5
|
constructor() {
|
|
6
6
|
super(...arguments);
|
|
7
|
-
this
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
7
|
+
Object.defineProperty(this, "direction", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
configurable: true,
|
|
10
|
+
writable: true,
|
|
11
|
+
value: 'row'
|
|
12
|
+
});
|
|
13
|
+
Object.defineProperty(this, "ratio", {
|
|
14
|
+
enumerable: true,
|
|
15
|
+
configurable: true,
|
|
16
|
+
writable: true,
|
|
17
|
+
value: 0.5
|
|
18
|
+
});
|
|
19
|
+
Object.defineProperty(this, "resizable", {
|
|
20
|
+
enumerable: true,
|
|
21
|
+
configurable: true,
|
|
22
|
+
writable: true,
|
|
23
|
+
value: false
|
|
24
|
+
});
|
|
25
|
+
Object.defineProperty(this, "splitter", {
|
|
26
|
+
enumerable: true,
|
|
27
|
+
configurable: true,
|
|
28
|
+
writable: true,
|
|
29
|
+
value: void 0
|
|
30
|
+
});
|
|
31
|
+
Object.defineProperty(this, "drag", {
|
|
32
|
+
enumerable: true,
|
|
33
|
+
configurable: true,
|
|
34
|
+
writable: true,
|
|
35
|
+
value: (e) => {
|
|
36
|
+
e.stopPropagation();
|
|
37
|
+
e.preventDefault();
|
|
38
|
+
const { width, height, left, top } = this.getBoundingClientRect();
|
|
39
|
+
const mouseX = e.clientX - left;
|
|
40
|
+
const mouseY = e.clientY - top;
|
|
41
|
+
if (this.direction == 'row') {
|
|
42
|
+
const totalWidth = this.offsetWidth;
|
|
43
|
+
this.ratio = mouseX / width;
|
|
44
|
+
}
|
|
45
|
+
else {
|
|
46
|
+
const totalHeight = this.offsetHeight;
|
|
47
|
+
this.ratio = mouseY / height;
|
|
48
|
+
}
|
|
19
49
|
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
50
|
+
});
|
|
51
|
+
Object.defineProperty(this, "stopDragging", {
|
|
52
|
+
enumerable: true,
|
|
53
|
+
configurable: true,
|
|
54
|
+
writable: true,
|
|
55
|
+
value: (e) => {
|
|
56
|
+
e.stopPropagation();
|
|
57
|
+
e.preventDefault();
|
|
58
|
+
document.removeEventListener('mousemove', this.drag);
|
|
59
|
+
document.removeEventListener('mouseup', this.stopDragging);
|
|
60
|
+
document.body.style.cursor = 'auto';
|
|
23
61
|
}
|
|
24
|
-
};
|
|
25
|
-
this.stopDragging = (e) => {
|
|
26
|
-
e.stopPropagation();
|
|
27
|
-
e.preventDefault();
|
|
28
|
-
document.removeEventListener('mousemove', this.drag);
|
|
29
|
-
document.removeEventListener('mouseup', this.stopDragging);
|
|
30
|
-
document.body.style.cursor = 'auto';
|
|
31
|
-
};
|
|
62
|
+
});
|
|
32
63
|
}
|
|
33
64
|
render() {
|
|
34
65
|
return html `
|
|
@@ -56,7 +87,11 @@ let OxSplitPane = class OxSplitPane extends LitElement {
|
|
|
56
87
|
document.body.style.cursor = this.direction == 'row' ? 'col-resize' : 'row-resize';
|
|
57
88
|
}
|
|
58
89
|
};
|
|
59
|
-
OxSplitPane
|
|
90
|
+
Object.defineProperty(OxSplitPane, "styles", {
|
|
91
|
+
enumerable: true,
|
|
92
|
+
configurable: true,
|
|
93
|
+
writable: true,
|
|
94
|
+
value: css `
|
|
60
95
|
:host {
|
|
61
96
|
display: flex;
|
|
62
97
|
flex-direction: var(--flex-direction, column);
|
|
@@ -97,7 +132,8 @@ OxSplitPane.styles = css `
|
|
|
97
132
|
slot[name='back']::slotted(*) {
|
|
98
133
|
flex: calc(1 - var(--split-ratio, 0.5));
|
|
99
134
|
}
|
|
100
|
-
|
|
135
|
+
`
|
|
136
|
+
});
|
|
101
137
|
__decorate([
|
|
102
138
|
property({ type: String, attribute: true })
|
|
103
139
|
], OxSplitPane.prototype, "direction", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-split-pane.js","sourceRoot":"","sources":["../../../src/components/ox-split-pane.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAA;AACpE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAG3D,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QA4CwC,
|
|
1
|
+
{"version":3,"file":"ox-split-pane.js","sourceRoot":"","sources":["../../../src/components/ox-split-pane.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, PropertyValues, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\n@customElement('ox-split-pane')\nexport class OxSplitPane extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: var(--flex-direction, column);\n\n width: 100%;\n height: 100%;\n }\n\n #splitter {\n background-color: #ccc;\n cursor: var(--cursor-shape, col-resize);\n }\n\n #splitter {\n background-color: #ccc;\n cursor: var(--cursor-shape, col-resize);\n color: var(--md-sys-color-on-primary-container, #ccc);\n }\n\n :host([direction='row']) #splitter {\n height: 100%;\n width: 4px;\n }\n\n :host([direction='column']) #splitter {\n width: 100%;\n height: 4px;\n }\n\n ::slotted(*) {\n overflow: hidden;\n }\n\n slot[name='front']::slotted(*) {\n flex: var(--split-ratio, 0.5);\n }\n\n slot[name='back']::slotted(*) {\n flex: calc(1 - var(--split-ratio, 0.5));\n }\n `\n\n @property({ type: String, attribute: true }) direction: string = 'row'\n @property({ type: Number, attribute: true }) ratio: number = 0.5\n @property({ type: Boolean, attribute: true }) resizable: boolean = false\n\n @query('#splitter') splitter!: HTMLDivElement\n\n render() {\n return html`\n <slot name=\"front\"></slot>\n ${this.resizable\n ? html`<div id=\"splitter\" @mousedown=${this.startDragging} direction=${this.direction}></div>`\n : nothing}\n <slot name=\"back\"></slot>\n `\n }\n\n async updated(changes: PropertyValues<this>) {\n if (changes.has('direction')) {\n this.style.setProperty('--flex-direction', this.direction)\n this.style.setProperty('--cursor-shape', this.direction == 'row' ? 'col-resize' : 'row-resize')\n }\n\n if (changes.has('ratio')) {\n this.style.setProperty('--split-ratio', String(this.ratio))\n }\n }\n\n startDragging(e: MouseEvent) {\n e.stopPropagation()\n e.preventDefault()\n\n document.addEventListener('mousemove', this.drag)\n document.addEventListener('mouseup', this.stopDragging)\n\n document.body.style.cursor = this.direction == 'row' ? 'col-resize' : 'row-resize'\n }\n\n drag = (e: MouseEvent) => {\n e.stopPropagation()\n e.preventDefault()\n\n const { width, height, left, top } = this.getBoundingClientRect()\n\n const mouseX = e.clientX - left\n const mouseY = e.clientY - top\n\n if (this.direction == 'row') {\n const totalWidth = this.offsetWidth\n this.ratio = mouseX / width\n } else {\n const totalHeight = this.offsetHeight\n this.ratio = mouseY / height\n }\n }\n\n stopDragging = (e: MouseEvent) => {\n e.stopPropagation()\n e.preventDefault()\n\n document.removeEventListener('mousemove', this.drag)\n document.removeEventListener('mouseup', this.stopDragging)\n\n document.body.style.cursor = 'auto'\n }\n}\n"]}
|
package/dist/src/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import './initializer';
|
|
1
|
+
import './initializer.js';
|
|
2
2
|
export { PopupHandle, PopupOptions } from '@operato/popup';
|
|
3
3
|
export * from './layouts/ox-snack-bar.js';
|
|
4
4
|
export * from './layouts/ox-header-bar.js';
|
|
@@ -7,6 +7,6 @@ export * from './layouts/ox-aside-bar.js';
|
|
|
7
7
|
export * from './layouts/ox-footer-bar.js';
|
|
8
8
|
export * from './layouts/ox-page-header-bar.js';
|
|
9
9
|
export * from './layouts/ox-page-footer-bar.js';
|
|
10
|
-
export * from './actions/layout';
|
|
11
|
-
export * from './actions/snackbar';
|
|
12
|
-
export * from './components/ox-split-pane';
|
|
10
|
+
export * from './actions/layout.js';
|
|
11
|
+
export * from './actions/snackbar.js';
|
|
12
|
+
export * from './components/ox-split-pane.js';
|
package/dist/src/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import './initializer';
|
|
1
|
+
import './initializer.js';
|
|
2
2
|
export * from './layouts/ox-snack-bar.js';
|
|
3
3
|
export * from './layouts/ox-header-bar.js';
|
|
4
4
|
export * from './layouts/ox-nav-bar.js';
|
|
@@ -6,7 +6,7 @@ export * from './layouts/ox-aside-bar.js';
|
|
|
6
6
|
export * from './layouts/ox-footer-bar.js';
|
|
7
7
|
export * from './layouts/ox-page-header-bar.js';
|
|
8
8
|
export * from './layouts/ox-page-footer-bar.js';
|
|
9
|
-
export * from './actions/layout';
|
|
10
|
-
export * from './actions/snackbar';
|
|
11
|
-
export * from './components/ox-split-pane';
|
|
9
|
+
export * from './actions/layout.js';
|
|
10
|
+
export * from './actions/snackbar.js';
|
|
11
|
+
export * from './components/ox-split-pane.js';
|
|
12
12
|
//# sourceMappingURL=index.js.map
|
package/dist/src/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAA;AAIzB,cAAc,2BAA2B,CAAA;AACzC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,2BAA2B,CAAA;AACzC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,iCAAiC,CAAA;AAE/C,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AAErC,cAAc,+BAA+B,CAAA","sourcesContent":["import './initializer.js'\n\nexport { PopupHandle, PopupOptions } from '@operato/popup'\n\nexport * from './layouts/ox-snack-bar.js'\nexport * from './layouts/ox-header-bar.js'\nexport * from './layouts/ox-nav-bar.js'\nexport * from './layouts/ox-aside-bar.js'\nexport * from './layouts/ox-footer-bar.js'\nexport * from './layouts/ox-page-header-bar.js'\nexport * from './layouts/ox-page-footer-bar.js'\n\nexport * from './actions/layout.js'\nexport * from './actions/snackbar.js'\n\nexport * from './components/ox-split-pane.js'\n"]}
|
package/dist/src/initializer.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { REGISTER_NAVIGATION_CALLBACK, store } from '@operato/shell';
|
|
2
|
-
import { UPDATE_VIEWPART, closeOverlay, openOverlay, openPopup, toggleOverlay } from './actions/layout';
|
|
3
|
-
import layout from './reducers/layout';
|
|
4
|
-
import { showSnackbar } from './actions/snackbar';
|
|
5
|
-
import snackbar from './reducers/snackbar';
|
|
2
|
+
import { UPDATE_VIEWPART, closeOverlay, openOverlay, openPopup, toggleOverlay } from './actions/layout.js';
|
|
3
|
+
import layout from './reducers/layout.js';
|
|
4
|
+
import { showSnackbar } from './actions/snackbar.js';
|
|
5
|
+
import snackbar from './reducers/snackbar.js';
|
|
6
6
|
store.addReducers({
|
|
7
7
|
layout,
|
|
8
8
|
snackbar
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"initializer.js","sourceRoot":"","sources":["../../src/initializer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACpE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"initializer.js","sourceRoot":"","sources":["../../src/initializer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACpE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAE1G,OAAO,MAAM,MAAM,sBAAsB,CAAA;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,QAAQ,MAAM,wBAAwB,CAAA;AAE7C,KAAK,CAAC,WAAW,CAAC;IAChB,MAAM;IACN,QAAQ;CACT,CAAC,CAAA;AAEF,QAAQ,CAAC,gBAAgB,CAAC,cAAc,EAAE,KAAK,CAAC,EAAE;IAChD,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAI,KAAqB,CAAC,MAAM,CAAA;IACvD,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;AAC5B,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,gBAAgB,CAAC,eAAe,EAAE,KAAK,CAAC,EAAE;IACjD,MAAM,EAAE,IAAI,EAAE,GAAI,KAAqB,CAAC,MAAM,CAAA;IAC9C,YAAY,CAAC,IAAI,CAAC,CAAA;AACpB,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,KAAK,CAAC,EAAE;IAClD,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAI,KAAqB,CAAC,MAAM,CAAA;IACvD,aAAa,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;AAC9B,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,gBAAgB,CAAC,YAAY,EAAE,KAAK,CAAC,EAAE;IAC9C,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAI,KAAqB,CAAC,MAAM,CAAA;IACrE,IAAI,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;IACxC,IAAI,KAAK,IAAI,QAAQ;QAAE,QAAQ,CAAC,KAAK,CAAC,CAAA;AACxC,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE;IAC1C,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,GAAI,KAAqB,CAAC,MAAM,CAAA;IAE5E,QAAQ,KAAK,EAAE,CAAC;QACd,KAAK,OAAO;YACV,OAAO,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;YAC1B,MAAK;QACP,KAAK,MAAM;YACT,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;YACzB,MAAK;QACP,KAAK,MAAM;YACT,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;YACrB,MAAK;QACP;YACE,MAAK;IACT,CAAC;IAED,KAAK,CAAC,QAAQ,CACZ,YAAY,CAAC,KAAK,EAAE;QAClB,OAAO;QACP,GAAI,MAGF;KACH,CAAQ,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,sBAAsB;AACtB,IAAI,YAAY,GAAU,EAAE,CAAA;AAC5B,SAAS,eAAe;IACtB,OAAO,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;AAC9F,CAAC;AAED,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE;;IAC3C,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,CAAC,EAAE,CAAC;QAC/E,CAAA,MAAA,MAAA,OAAO,CAAC,KAAK,0CAAE,OAAO,0CAAE,SAAS,KAAI,OAAO,CAAC,IAAI,EAAE,CAAA;IACrD,CAAC;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,cAAc,GAAG,CAAC,QAAgB,EAAE,KAAY,EAAE,EAAE;IACxD,IAAI,SAAS,GAAG,KAAK,YAAY,aAAa,CAAA;IAE9C,IAAI,KAAK,GAAG,OAAO,CAAC,KAAK,CAAA;IACzB,IAAI,OAAO,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAA;IAC5B,IAAI,QAAQ,GAAG,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,KAAI,CAAC,CAAC,CAAA;IAEtC,IAAI,YAAY,GAAG,eAAe,EAAE,CAAA;IAEpC,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ,GAAG,YAAY,EAAE,CAAC;QACvD,gCAAgC;QAChC,GAAG,CAAC;YACF,IAAI,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC,GAAG,EAAE,CAAA;YACpC,KAAK,CAAC,QAAQ,CAAC;gBACb,IAAI,EAAE,eAAe;gBACrB,IAAI,EAAE,OAAO,CAAC,IAAI;gBAClB,QAAQ,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;aAC1B,CAAC,CAAA;YAEF,YAAY,GAAG,eAAe,EAAE,CAAA;QAClC,CAAC,QAAQ,QAAQ,GAAG,YAAY,EAAC;IACnC,CAAC;IAED,IAAI,CAAC,SAAS,IAAI,OAAO,EAAE,CAAC;QAC1B,YAAY,CAAC,IAAI,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC,CAAA;QAE/B,KAAK,CAAC,QAAQ,CAAC;YACb,IAAI,EAAE,eAAe;YACrB,IAAI,EAAE,OAAO,CAAC,IAAI;YAClB,QAAQ,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;SACzB,CAAC,CAAA;IACJ,CAAC;AACH,CAAC,CAAA;AAED,KAAK,CAAC,QAAQ,CAAC;IACb,IAAI,EAAE,4BAA4B;IAClC,QAAQ,EAAE,cAAc;CACzB,CAAC,CAAA;AAEF,eAAe,KAAK,CAAA","sourcesContent":["import { REGISTER_NAVIGATION_CALLBACK, store } from '@operato/shell'\nimport { UPDATE_VIEWPART, closeOverlay, openOverlay, openPopup, toggleOverlay } from './actions/layout.js'\n\nimport layout from './reducers/layout.js'\nimport { showSnackbar } from './actions/snackbar.js'\nimport snackbar from './reducers/snackbar.js'\n\nstore.addReducers({\n layout,\n snackbar\n})\n\ndocument.addEventListener('open-overlay', event => {\n const { name, options } = (event as CustomEvent).detail\n openOverlay(name, options)\n})\n\ndocument.addEventListener('close-overlay', event => {\n const { name } = (event as CustomEvent).detail\n closeOverlay(name)\n})\n\ndocument.addEventListener('toggle-overlay', event => {\n const { name, options } = (event as CustomEvent).detail\n toggleOverlay(name, options)\n})\n\ndocument.addEventListener('open-popup', event => {\n const { template, options, callback } = (event as CustomEvent).detail\n var popup = openPopup(template, options)\n if (popup && callback) callback(popup)\n})\n\ndocument.addEventListener('notify', event => {\n let { message, level, ex = '', option = {} } = (event as CustomEvent).detail\n\n switch (level) {\n case 'error':\n console.error(message, ex)\n break\n case 'warn':\n console.warn(message, ex)\n break\n case 'info':\n console.info(message)\n break\n default:\n break\n }\n\n store.dispatch(\n showSnackbar(level, {\n message,\n ...(option as {\n action?: any\n timer?: number\n })\n }) as any\n )\n})\n\n/* overlay handling */\nvar overlayStack: any[] = []\nfunction getLastSequence() {\n return overlayStack.length > 0 ? overlayStack[overlayStack.length - 1].overlay.sequence : -1\n}\n\ndocument.addEventListener('keydown', event => {\n if (overlayStack.length > 0 && (event.key === 'Escape' || event.key === 'Esc')) {\n history.state?.overlay?.escapable && history.back()\n }\n})\n\nconst historyHandler = (location: string, event: Event) => {\n var navigated = event instanceof PopStateEvent\n\n var state = history.state\n var overlay = state?.overlay\n var sequence = overlay?.sequence || -1\n\n var lastSequence = getLastSequence()\n\n if (overlayStack.length > 0 && sequence < lastSequence) {\n /* overlay 관련 history가 아닌 경우. */\n do {\n let { overlay } = overlayStack.pop()\n store.dispatch({\n type: UPDATE_VIEWPART,\n name: overlay.name,\n override: { show: false }\n })\n\n lastSequence = getLastSequence()\n } while (sequence < lastSequence)\n }\n\n if (!navigated && overlay) {\n overlayStack.push({ ...state })\n\n store.dispatch({\n type: UPDATE_VIEWPART,\n name: overlay.name,\n override: { show: true }\n })\n }\n}\n\nstore.dispatch({\n type: REGISTER_NAVIGATION_CALLBACK,\n callback: historyHandler\n})\n\nexport default store\n"]}
|
|
@@ -11,9 +11,24 @@ import store from '../initializer.js';
|
|
|
11
11
|
let AsideBar = class AsideBar extends connect(store)(LitElement) {
|
|
12
12
|
constructor() {
|
|
13
13
|
super(...arguments);
|
|
14
|
-
this
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
Object.defineProperty(this, "fullbleed", {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
configurable: true,
|
|
17
|
+
writable: true,
|
|
18
|
+
value: false
|
|
19
|
+
});
|
|
20
|
+
Object.defineProperty(this, "viewparts", {
|
|
21
|
+
enumerable: true,
|
|
22
|
+
configurable: true,
|
|
23
|
+
writable: true,
|
|
24
|
+
value: {}
|
|
25
|
+
});
|
|
26
|
+
Object.defineProperty(this, "_startWidth", {
|
|
27
|
+
enumerable: true,
|
|
28
|
+
configurable: true,
|
|
29
|
+
writable: true,
|
|
30
|
+
value: 0
|
|
31
|
+
});
|
|
17
32
|
}
|
|
18
33
|
render() {
|
|
19
34
|
var viewparts = this.viewparts;
|
|
@@ -82,9 +97,13 @@ let AsideBar = class AsideBar extends connect(store)(LitElement) {
|
|
|
82
97
|
this.viewparts = state.layout.viewparts || {};
|
|
83
98
|
}
|
|
84
99
|
};
|
|
85
|
-
AsideBar
|
|
86
|
-
|
|
87
|
-
|
|
100
|
+
Object.defineProperty(AsideBar, "styles", {
|
|
101
|
+
enumerable: true,
|
|
102
|
+
configurable: true,
|
|
103
|
+
writable: true,
|
|
104
|
+
value: [
|
|
105
|
+
ScrollbarStyles,
|
|
106
|
+
css `
|
|
88
107
|
:host {
|
|
89
108
|
display: flex;
|
|
90
109
|
flex-flow: row-reverse nowrap;
|
|
@@ -98,7 +117,8 @@ AsideBar.styles = [
|
|
|
98
117
|
overflow-y: auto;
|
|
99
118
|
}
|
|
100
119
|
`
|
|
101
|
-
]
|
|
120
|
+
]
|
|
121
|
+
});
|
|
102
122
|
__decorate([
|
|
103
123
|
property({ type: Boolean, attribute: 'fullbleed' })
|
|
104
124
|
], AsideBar.prototype, "fullbleed", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-aside-bar.js","sourceRoot":"","sources":["../../../src/layouts/ox-aside-bar.ts"],"names":[],"mappings":";AAAA,OAAO,uCAAuC,CAAA;AAC9C,OAAO,qCAAqC,CAAA;AAE5C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,EAAY,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC/D,OAAO,KAAK,MAAM,mBAAmB,CAAA;AAGrC,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAAjD;;QAmBuD,
|
|
1
|
+
{"version":3,"file":"ox-aside-bar.js","sourceRoot":"","sources":["../../../src/layouts/ox-aside-bar.ts"],"names":[],"mappings":";AAAA,OAAO,uCAAuC,CAAA;AAC9C,OAAO,qCAAqC,CAAA;AAE5C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,EAAY,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC/D,OAAO,KAAK,MAAM,mBAAmB,CAAA;AAGrC,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAAjD;;QAmBuD;;;;mBAAqB,KAAK;WAAA;QAEtE;;;;mBAA0C,EAAE;WAAA;QAE7C;;;;mBAAsB,CAAC;WAAA;IAyEjC,CAAC;IAvEC,MAAM;QACJ,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS,CAAA;QAC9B,IAAI,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;aACnC,GAAG,CAAC,IAAI,CAAC,EAAE;YACV,OAAO;gBACL,IAAI;gBACJ,GAAG,SAAS,CAAC,IAAI,CAAC;aACnB,CAAA;QACH,CAAC,CAAC;aACD,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,QAAQ,IAAI,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAA;QAEhG,SAAS,GAAG;YACV,GAAG,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,IAAI,cAAc,CAAC,OAAO,CAAC;YACzE,GAAG,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,KAAK,cAAc,CAAC,OAAO,CAAC;SAC3E,CAAA;QAED,OAAO,IAAI,CAAA;QACP,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CACzB,CAAC,QAAQ,CAAC,IAAI;YACZ,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,QAAQ,CAAC,QAAQ;gBACjB,CAAC,CAAC,IAAI,CAAA;;8BAEY,QAAQ,CAAC,QAAQ;;8BAEjB,QAAQ,CAAC,QAAQ;0BACrB,QAAQ,CAAC,IAAI;0BACb,QAAQ,CAAC,IAAI;2BACZ,QAAQ,CAAC,KAAK;0BACf,QAAQ,CAAC,IAAI;8BACT,QAAQ,CAAC,QAAQ;wCACP,QAAQ,CAAC,kBAAkB;gCACnC,IAAI;4BACR,QAAQ,CAAC,MAAM;4BACf,QAAQ,CAAC,MAAM;4BACf,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC;qBACjC,QAAQ,CAAC,QAAQ;;eAEvB;gBACH,CAAC,CAAC,IAAI,CAAA;gCACc,QAAQ,CAAC,QAAQ;kBAC/B,QAAQ,CAAC,SAAS;oBAClB,CAAC,CAAC,IAAI,CAAA;;8CAEsB,CAAC,CAAc,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;yCAC5C,CAAC,CAAc,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;;;qBAG1D;oBACH,CAAC,CAAC,IAAI,CAAA,EAAE;eACX,CACR;KACF,CAAA;IACH,CAAC;IAED,WAAW,CAAC,CAAc;;QACxB,IAAI,CAAC,WAAW,GAAG,MAAC,MAAC,CAAC,CAAC,MAAsB,0CAAE,sBAAsC,0CAAE,WAAW,CAAA;IACpG,CAAC;IAED,UAAU,CAAC,CAAc;;QACvB,IAAI,KAAK,GAAG,CAAC,CAAC,MAAM,CAAA;QAEpB,IAAI,CAAC,GAAG,MAAC,MAAC,CAAC,CAAC,MAAsB,0CAAE,sBAAsC,0CAAE,QAAQ,CAAA;QACpF,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAC1B,CAAC;YAAC,GAAmB,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,CAAC,IAAI,CAAA;QACvE,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,YAAY,CAAC,KAAU;QACrB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,IAAI,EAAE,CAAA;IAC/C,CAAC;;AA9FM;;;;WAAS;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;KAaF;KACF;EAhBY,CAgBZ;AAEoD;IAApD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;2CAA2B;AAEtE;IAAR,KAAK,EAAE;2CAA6C;AArBjD,QAAQ;IADb,aAAa,CAAC,cAAc,CAAC;GACxB,QAAQ,CAgGb","sourcesContent":["import '@operato/popup/ox-floating-overlay.js'\nimport '../components/ox-resize-splitter.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { Viewpart, VIEWPART_LEVEL } from '../actions/layout.js'\nimport store from '../initializer.js'\n\n@customElement('ox-aside-bar')\nclass AsideBar extends connect(store)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-flow: row-reverse nowrap;\n align-items: stretch;\n\n position: relative;\n }\n\n *[asidebar] {\n display: block;\n overflow-y: auto;\n }\n `\n ]\n\n @property({ type: Boolean, attribute: 'fullbleed' }) fullbleed: boolean = false\n\n @state() viewparts: { [name: string]: Viewpart } = {}\n\n private _startWidth: number = 0\n\n render() {\n var viewparts = this.viewparts\n var asidebars = Object.keys(viewparts)\n .map(name => {\n return {\n name,\n ...viewparts[name]\n }\n })\n .filter(viewpart => viewpart.position == 'asidebar' && (!this.fullbleed || viewpart.hovering))\n\n asidebars = [\n ...asidebars.filter(viewpart => viewpart.level == VIEWPART_LEVEL.TOPMOST),\n ...asidebars.filter(viewpart => viewpart.level !== VIEWPART_LEVEL.TOPMOST)\n ]\n\n return html`\n ${asidebars.map(asidebar =>\n !asidebar.show\n ? html``\n : asidebar.hovering\n ? html`\n <ox-floating-overlay\n .backdrop=${asidebar.backdrop}\n direction=\"left\"\n .hovering=${asidebar.hovering}\n .name=${asidebar.name}\n .size=${asidebar.size}\n .title=${asidebar.title}\n .help=${asidebar.help}\n .closable=${asidebar.closable}\n .templateProperties=${asidebar.templateProperties}\n .historical=${true}\n .search=${asidebar.search}\n .filter=${asidebar.filter}\n z-index=${ifDefined(asidebar.zIndex)}\n >${asidebar.template}</ox-floating-overlay\n >\n `\n : html`\n <div asidebar>${asidebar.template}</div>\n ${asidebar.resizable\n ? html`\n <ox-resize-splitter\n @splitter-dragstart=${(e: CustomEvent) => this.resizeStart(e)}\n @splitter-drag=${(e: CustomEvent) => this.resizeDrag(e)}\n vertical\n ></ox-resize-splitter>\n `\n : html``}\n `\n )}\n `\n }\n\n resizeStart(e: CustomEvent) {\n this._startWidth = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement)?.offsetWidth\n }\n\n resizeDrag(e: CustomEvent) {\n var delta = e.detail\n\n var x = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement)?.children\n Array.from(x).forEach(ele => {\n ;(ele as HTMLElement).style.width = `${this._startWidth - delta.x}px`\n })\n }\n\n stateChanged(state: any) {\n this.viewparts = state.layout.viewparts || {}\n }\n}\n"]}
|
|
@@ -10,9 +10,24 @@ import store from '../initializer.js';
|
|
|
10
10
|
let FooterBar = class FooterBar extends connect(store)(LitElement) {
|
|
11
11
|
constructor() {
|
|
12
12
|
super(...arguments);
|
|
13
|
-
this
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
Object.defineProperty(this, "fullbleed", {
|
|
14
|
+
enumerable: true,
|
|
15
|
+
configurable: true,
|
|
16
|
+
writable: true,
|
|
17
|
+
value: false
|
|
18
|
+
});
|
|
19
|
+
Object.defineProperty(this, "viewparts", {
|
|
20
|
+
enumerable: true,
|
|
21
|
+
configurable: true,
|
|
22
|
+
writable: true,
|
|
23
|
+
value: {}
|
|
24
|
+
});
|
|
25
|
+
Object.defineProperty(this, "_startHeight", {
|
|
26
|
+
enumerable: true,
|
|
27
|
+
configurable: true,
|
|
28
|
+
writable: true,
|
|
29
|
+
value: 0
|
|
30
|
+
});
|
|
16
31
|
}
|
|
17
32
|
render() {
|
|
18
33
|
var viewparts = this.viewparts;
|
|
@@ -80,8 +95,12 @@ let FooterBar = class FooterBar extends connect(store)(LitElement) {
|
|
|
80
95
|
this.viewparts = state.layout.viewparts || {};
|
|
81
96
|
}
|
|
82
97
|
};
|
|
83
|
-
FooterBar
|
|
84
|
-
|
|
98
|
+
Object.defineProperty(FooterBar, "styles", {
|
|
99
|
+
enumerable: true,
|
|
100
|
+
configurable: true,
|
|
101
|
+
writable: true,
|
|
102
|
+
value: [
|
|
103
|
+
css `
|
|
85
104
|
:host {
|
|
86
105
|
display: flex;
|
|
87
106
|
flex-flow: column-reverse nowrap;
|
|
@@ -100,7 +119,8 @@ FooterBar.styles = [
|
|
|
100
119
|
}
|
|
101
120
|
}
|
|
102
121
|
`
|
|
103
|
-
]
|
|
122
|
+
]
|
|
123
|
+
});
|
|
104
124
|
__decorate([
|
|
105
125
|
property({ type: Boolean, attribute: 'fullbleed' })
|
|
106
126
|
], FooterBar.prototype, "fullbleed", void 0);
|