xframelib 0.7.0 → 0.7.3

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.
@@ -1,305 +0,0 @@
1
- .splitpanes {
2
- display: flex;
3
- width: 100%;
4
- height: 100%;
5
- }
6
- .splitpanes--vertical {
7
- flex-direction: row;
8
- }
9
- .splitpanes--horizontal {
10
- flex-direction: column;
11
- }
12
- .splitpanes--dragging * {
13
- user-select: none;
14
- }
15
- .splitpanes__pane {
16
- width: 100%;
17
- height: 100%;
18
- overflow: hidden;
19
- }
20
- .splitpanes--vertical .splitpanes__pane {
21
- transition: width 0.2s ease-out;
22
- }
23
- .splitpanes--horizontal .splitpanes__pane {
24
- transition: height 0.2s ease-out;
25
- }
26
- .splitpanes--dragging .splitpanes__pane {
27
- transition: none;
28
- }
29
- .splitpanes__splitter {
30
- touch-action: none;
31
- }
32
- .splitpanes--vertical > .splitpanes__splitter {
33
- min-width: 1px;
34
- cursor: col-resize;
35
- }
36
- .splitpanes--horizontal > .splitpanes__splitter {
37
- min-height: 1px;
38
- cursor: row-resize;
39
- }
40
-
41
- .splitpanes.default-theme .splitpanes__pane {
42
- background-color: #f2f2f2;
43
- }
44
- .splitpanes.default-theme .splitpanes__splitter {
45
- background-color: #fff;
46
- box-sizing: border-box;
47
- position: relative;
48
- flex-shrink: 0;
49
- }
50
- .splitpanes.default-theme .splitpanes__splitter:before, .splitpanes.default-theme .splitpanes__splitter:after {
51
- content: "";
52
- position: absolute;
53
- top: 50%;
54
- left: 50%;
55
- background-color: rgba(0, 0, 0, 0.15);
56
- transition: background-color 0.3s;
57
- }
58
- .splitpanes.default-theme .splitpanes__splitter:hover:before, .splitpanes.default-theme .splitpanes__splitter:hover:after {
59
- background-color: rgba(0, 0, 0, 0.25);
60
- }
61
- .splitpanes.default-theme .splitpanes__splitter:first-child {
62
- cursor: auto;
63
- }
64
-
65
- .default-theme.splitpanes .splitpanes .splitpanes__splitter {
66
- z-index: 1;
67
- }
68
- .default-theme.splitpanes--vertical > .splitpanes__splitter,
69
- .default-theme .splitpanes--vertical > .splitpanes__splitter {
70
- width: 7px;
71
- border-left: 1px solid #eee;
72
- margin-left: -1px;
73
- }
74
- .default-theme.splitpanes--vertical > .splitpanes__splitter:before, .default-theme.splitpanes--vertical > .splitpanes__splitter:after,
75
- .default-theme .splitpanes--vertical > .splitpanes__splitter:before,
76
- .default-theme .splitpanes--vertical > .splitpanes__splitter:after {
77
- transform: translateY(-50%);
78
- width: 1px;
79
- height: 30px;
80
- }
81
- .default-theme.splitpanes--vertical > .splitpanes__splitter:before,
82
- .default-theme .splitpanes--vertical > .splitpanes__splitter:before {
83
- margin-left: -2px;
84
- }
85
- .default-theme.splitpanes--vertical > .splitpanes__splitter:after,
86
- .default-theme .splitpanes--vertical > .splitpanes__splitter:after {
87
- margin-left: 1px;
88
- }
89
- .default-theme.splitpanes--horizontal > .splitpanes__splitter,
90
- .default-theme .splitpanes--horizontal > .splitpanes__splitter {
91
- height: 7px;
92
- border-top: 1px solid #eee;
93
- margin-top: -1px;
94
- }
95
- .default-theme.splitpanes--horizontal > .splitpanes__splitter:before, .default-theme.splitpanes--horizontal > .splitpanes__splitter:after,
96
- .default-theme .splitpanes--horizontal > .splitpanes__splitter:before,
97
- .default-theme .splitpanes--horizontal > .splitpanes__splitter:after {
98
- transform: translateX(-50%);
99
- width: 30px;
100
- height: 1px;
101
- }
102
- .default-theme.splitpanes--horizontal > .splitpanes__splitter:before,
103
- .default-theme .splitpanes--horizontal > .splitpanes__splitter:before {
104
- margin-top: -2px;
105
- }
106
- .default-theme.splitpanes--horizontal > .splitpanes__splitter:after,
107
- .default-theme .splitpanes--horizontal > .splitpanes__splitter:after {
108
- margin-top: 1px;
109
- }
110
-
111
- .vcpg {
112
- border: 1px solid var(--border-color);
113
- border-radius: 4px;
114
- width: 100%;
115
- }
116
- .vcpg ::v-deep(.vcp) * {
117
- box-sizing: border-box;
118
- }
119
- .vcpg ::v-deep(.vcp) .vcp__header {
120
- background-color: var(--bg-color-header);
121
- height: 30px;
122
- border-bottom: 2px solid #c6bebd;
123
- transition: background-color 0.3s ease;
124
- }
125
- .vcpg ::v-deep(.vcp) .vcp__header .vcp__header:hover {
126
- background-color: var(--bg-color-header-hover);
127
- }
128
- .vcpg ::v-deep(.vcp) .vcp__header .vcp__header:active {
129
- background-color: var(--bg-color-header-active);
130
- }
131
- .vcpg ::v-deep(.vcp) .vcp:not(:first-of-type) .vcp__header {
132
- border-top: 2px solid var(--border-color);
133
- }
134
- .vcpg ::v-deep(.vcp) .vcp__header-title {
135
- font-weight: 500;
136
- }
137
- .vcpg ::v-deep(.vcp) .vcp__body {
138
- border-top: 1px solid var(--border-color);
139
- background-color: var(--bg-color-body);
140
- }
141
-
142
- .window {
143
- display: flex;
144
- flex-flow: column;
145
- position: absolute;
146
- border-radius: 4pt 4pt 0 0;
147
- }
148
-
149
- .titlebar {
150
- display: flex;
151
- flex-flow: row nowrap;
152
- border-radius: 4pt 4pt 0 0;
153
- font-family: sans-serif;
154
- padding: 0.5em;
155
- flex: 0 0 auto;
156
- }
157
-
158
- .title {
159
- flex-grow: 1;
160
- white-space: nowrap;
161
- overflow: hidden;
162
- text-overflow: ellipsis;
163
- }
164
-
165
- .content {
166
- flex-grow: 1;
167
- padding: 0.5em;
168
- }
169
-
170
- .draggable-handle {
171
- cursor: move;
172
- }
173
-
174
- .fade-enter,
175
- .fade-leave-to {
176
- opacity: 0;
177
- transform: scale(0.9);
178
- }
179
-
180
- .fade-enter-active,
181
- .fade-leave-active {
182
- transition: 0.2s;
183
- }
184
-
185
- .vcp__header {
186
- display: flex;
187
- padding: 12px;
188
- pointer-events: none;
189
- }
190
- .vcp--expandable .vcp__header {
191
- pointer-events: auto;
192
- cursor: pointer;
193
- }
194
- .vcp__header-title {
195
- display: flex;
196
- align-items: center;
197
- flex: 1;
198
- }
199
- .vcp__header-icon {
200
- display: flex;
201
- align-items: center;
202
- transition: transform 0.3s cubic-bezier(0.5, 0.25, 0, 1);
203
- }
204
- .vcp--expanded .vcp__header-icon {
205
- transform-origin: center;
206
- transform: rotate(180deg);
207
- }
208
- .vcp__header-icon > span {
209
- display: flex;
210
- height: 24px;
211
- width: 24px;
212
- }
213
- .vcp__header-icon ::v-deep(svg) {
214
- height: 100%;
215
- width: 100%;
216
- }
217
- .vcp__body {
218
- overflow: hidden;
219
- transition: all 0.3s cubic-bezier(0.5, 0.25, 0, 1);
220
- }
221
- .vcp__body-content {
222
- padding: 12px;
223
- }
224
-
225
- .slide-enter-from,
226
- .slide-leave-to {
227
- opacity: 0.25;
228
- }
229
-
230
- .layoutContainer {
231
- width: 100%;
232
- height: 100%;
233
- padding: 0;
234
- margin: 0;
235
- --layout-top-height: 70px;
236
- --layout-left-width: 200px;
237
- --layout-right-width: 200px;
238
- --layout-bottom-height: 60px;
239
- --layout-centerback-backcolor: #020202;
240
- --layout-top-zindex: 100;
241
- --layout-bottom-zindex: 100;
242
- --layout-center-zindex: 90;
243
- --layout-left-zindex: 100;
244
- --layout-right-zindex: 100;
245
- }
246
-
247
- .topContainer {
248
- position: absolute;
249
- top: 0px;
250
- left: 0px;
251
- width: 100%;
252
- height: var(--layout-top-height);
253
- z-index: var(--layout-top-zindex);
254
- pointer-events: none;
255
- }
256
-
257
- .bottomContainer {
258
- position: absolute;
259
- bottom: 0px;
260
- left: 0px;
261
- width: 100%;
262
- height: var(--layout-bottom-height);
263
- z-index: var(--layout-bottom-zindex);
264
- pointer-events: none;
265
- }
266
-
267
- .leftContainer {
268
- position: absolute;
269
- top: 0px;
270
- left: 0px;
271
- width: var(--layout-left-width);
272
- z-index: var(--layout-left-zindex);
273
- height: 100%;
274
- pointer-events: none;
275
- }
276
-
277
- .rightContainer {
278
- position: absolute;
279
- top: 0px;
280
- right: 0px;
281
- width: var(--layout-right-width);
282
- z-index: var(--layout-right-zindex);
283
- height: 100%;
284
- pointer-events: none;
285
- }
286
-
287
- .centerdiv {
288
- position: absolute;
289
- top: 0px;
290
- left: 0px;
291
- bottom: 0px;
292
- width: 100%;
293
- background-color: transparent;
294
- overflow: hidden;
295
- pointer-events: none;
296
- }
297
-
298
- .btn {
299
- background-color: transparent;
300
- border: none;
301
- font-size: medium;
302
- margin: 0;
303
- padding: 0 0.25em;
304
- border-radius: 4pt;
305
- }
@@ -1,305 +0,0 @@
1
- .vcp__header {
2
- display: flex;
3
- padding: 12px;
4
- pointer-events: none;
5
- }
6
- .vcp--expandable .vcp__header {
7
- pointer-events: auto;
8
- cursor: pointer;
9
- }
10
- .vcp__header-title {
11
- display: flex;
12
- align-items: center;
13
- flex: 1;
14
- }
15
- .vcp__header-icon {
16
- display: flex;
17
- align-items: center;
18
- transition: transform 0.3s cubic-bezier(0.5, 0.25, 0, 1);
19
- }
20
- .vcp--expanded .vcp__header-icon {
21
- transform-origin: center;
22
- transform: rotate(180deg);
23
- }
24
- .vcp__header-icon > span {
25
- display: flex;
26
- height: 24px;
27
- width: 24px;
28
- }
29
- .vcp__header-icon ::v-deep(svg) {
30
- height: 100%;
31
- width: 100%;
32
- }
33
- .vcp__body {
34
- overflow: hidden;
35
- transition: all 0.3s cubic-bezier(0.5, 0.25, 0, 1);
36
- }
37
- .vcp__body-content {
38
- padding: 12px;
39
- }
40
-
41
- .slide-enter-from,
42
- .slide-leave-to {
43
- opacity: 0.25;
44
- }
45
-
46
- .vcpg {
47
- border: 1px solid var(--border-color);
48
- border-radius: 4px;
49
- width: 100%;
50
- }
51
- .vcpg ::v-deep(.vcp) * {
52
- box-sizing: border-box;
53
- }
54
- .vcpg ::v-deep(.vcp) .vcp__header {
55
- background-color: var(--bg-color-header);
56
- height: 30px;
57
- border-bottom: 2px solid #c6bebd;
58
- transition: background-color 0.3s ease;
59
- }
60
- .vcpg ::v-deep(.vcp) .vcp__header .vcp__header:hover {
61
- background-color: var(--bg-color-header-hover);
62
- }
63
- .vcpg ::v-deep(.vcp) .vcp__header .vcp__header:active {
64
- background-color: var(--bg-color-header-active);
65
- }
66
- .vcpg ::v-deep(.vcp) .vcp:not(:first-of-type) .vcp__header {
67
- border-top: 2px solid var(--border-color);
68
- }
69
- .vcpg ::v-deep(.vcp) .vcp__header-title {
70
- font-weight: 500;
71
- }
72
- .vcpg ::v-deep(.vcp) .vcp__body {
73
- border-top: 1px solid var(--border-color);
74
- background-color: var(--bg-color-body);
75
- }
76
-
77
- .splitpanes {
78
- display: flex;
79
- width: 100%;
80
- height: 100%;
81
- }
82
- .splitpanes--vertical {
83
- flex-direction: row;
84
- }
85
- .splitpanes--horizontal {
86
- flex-direction: column;
87
- }
88
- .splitpanes--dragging * {
89
- user-select: none;
90
- }
91
- .splitpanes__pane {
92
- width: 100%;
93
- height: 100%;
94
- overflow: hidden;
95
- }
96
- .splitpanes--vertical .splitpanes__pane {
97
- transition: width 0.2s ease-out;
98
- }
99
- .splitpanes--horizontal .splitpanes__pane {
100
- transition: height 0.2s ease-out;
101
- }
102
- .splitpanes--dragging .splitpanes__pane {
103
- transition: none;
104
- }
105
- .splitpanes__splitter {
106
- touch-action: none;
107
- }
108
- .splitpanes--vertical > .splitpanes__splitter {
109
- min-width: 1px;
110
- cursor: col-resize;
111
- }
112
- .splitpanes--horizontal > .splitpanes__splitter {
113
- min-height: 1px;
114
- cursor: row-resize;
115
- }
116
-
117
- .splitpanes.default-theme .splitpanes__pane {
118
- background-color: #f2f2f2;
119
- }
120
- .splitpanes.default-theme .splitpanes__splitter {
121
- background-color: #fff;
122
- box-sizing: border-box;
123
- position: relative;
124
- flex-shrink: 0;
125
- }
126
- .splitpanes.default-theme .splitpanes__splitter:before, .splitpanes.default-theme .splitpanes__splitter:after {
127
- content: "";
128
- position: absolute;
129
- top: 50%;
130
- left: 50%;
131
- background-color: rgba(0, 0, 0, 0.15);
132
- transition: background-color 0.3s;
133
- }
134
- .splitpanes.default-theme .splitpanes__splitter:hover:before, .splitpanes.default-theme .splitpanes__splitter:hover:after {
135
- background-color: rgba(0, 0, 0, 0.25);
136
- }
137
- .splitpanes.default-theme .splitpanes__splitter:first-child {
138
- cursor: auto;
139
- }
140
-
141
- .default-theme.splitpanes .splitpanes .splitpanes__splitter {
142
- z-index: 1;
143
- }
144
- .default-theme.splitpanes--vertical > .splitpanes__splitter,
145
- .default-theme .splitpanes--vertical > .splitpanes__splitter {
146
- width: 7px;
147
- border-left: 1px solid #eee;
148
- margin-left: -1px;
149
- }
150
- .default-theme.splitpanes--vertical > .splitpanes__splitter:before, .default-theme.splitpanes--vertical > .splitpanes__splitter:after,
151
- .default-theme .splitpanes--vertical > .splitpanes__splitter:before,
152
- .default-theme .splitpanes--vertical > .splitpanes__splitter:after {
153
- transform: translateY(-50%);
154
- width: 1px;
155
- height: 30px;
156
- }
157
- .default-theme.splitpanes--vertical > .splitpanes__splitter:before,
158
- .default-theme .splitpanes--vertical > .splitpanes__splitter:before {
159
- margin-left: -2px;
160
- }
161
- .default-theme.splitpanes--vertical > .splitpanes__splitter:after,
162
- .default-theme .splitpanes--vertical > .splitpanes__splitter:after {
163
- margin-left: 1px;
164
- }
165
- .default-theme.splitpanes--horizontal > .splitpanes__splitter,
166
- .default-theme .splitpanes--horizontal > .splitpanes__splitter {
167
- height: 7px;
168
- border-top: 1px solid #eee;
169
- margin-top: -1px;
170
- }
171
- .default-theme.splitpanes--horizontal > .splitpanes__splitter:before, .default-theme.splitpanes--horizontal > .splitpanes__splitter:after,
172
- .default-theme .splitpanes--horizontal > .splitpanes__splitter:before,
173
- .default-theme .splitpanes--horizontal > .splitpanes__splitter:after {
174
- transform: translateX(-50%);
175
- width: 30px;
176
- height: 1px;
177
- }
178
- .default-theme.splitpanes--horizontal > .splitpanes__splitter:before,
179
- .default-theme .splitpanes--horizontal > .splitpanes__splitter:before {
180
- margin-top: -2px;
181
- }
182
- .default-theme.splitpanes--horizontal > .splitpanes__splitter:after,
183
- .default-theme .splitpanes--horizontal > .splitpanes__splitter:after {
184
- margin-top: 1px;
185
- }
186
-
187
- .window {
188
- display: flex;
189
- flex-flow: column;
190
- position: absolute;
191
- border-radius: 4pt 4pt 0 0;
192
- }
193
-
194
- .titlebar {
195
- display: flex;
196
- flex-flow: row nowrap;
197
- border-radius: 4pt 4pt 0 0;
198
- font-family: sans-serif;
199
- padding: 0.5em;
200
- flex: 0 0 auto;
201
- }
202
-
203
- .title {
204
- flex-grow: 1;
205
- white-space: nowrap;
206
- overflow: hidden;
207
- text-overflow: ellipsis;
208
- }
209
-
210
- .content {
211
- flex-grow: 1;
212
- padding: 0.5em;
213
- }
214
-
215
- .draggable-handle {
216
- cursor: move;
217
- }
218
-
219
- .fade-enter,
220
- .fade-leave-to {
221
- opacity: 0;
222
- transform: scale(0.9);
223
- }
224
-
225
- .fade-enter-active,
226
- .fade-leave-active {
227
- transition: 0.2s;
228
- }
229
-
230
- .layoutContainer {
231
- width: 100%;
232
- height: 100%;
233
- padding: 0;
234
- margin: 0;
235
- --layout-top-height: 70px;
236
- --layout-left-width: 200px;
237
- --layout-right-width: 200px;
238
- --layout-bottom-height: 60px;
239
- --layout-centerback-backcolor: #020202;
240
- --layout-top-zindex: 100;
241
- --layout-bottom-zindex: 100;
242
- --layout-center-zindex: 90;
243
- --layout-left-zindex: 100;
244
- --layout-right-zindex: 100;
245
- }
246
-
247
- .topContainer {
248
- position: absolute;
249
- top: 0px;
250
- left: 0px;
251
- width: 100%;
252
- height: var(--layout-top-height);
253
- z-index: var(--layout-top-zindex);
254
- pointer-events: none;
255
- }
256
-
257
- .bottomContainer {
258
- position: absolute;
259
- bottom: 0px;
260
- left: 0px;
261
- width: 100%;
262
- height: var(--layout-bottom-height);
263
- z-index: var(--layout-bottom-zindex);
264
- pointer-events: none;
265
- }
266
-
267
- .leftContainer {
268
- position: absolute;
269
- top: 0px;
270
- left: 0px;
271
- width: var(--layout-left-width);
272
- z-index: var(--layout-left-zindex);
273
- height: 100%;
274
- pointer-events: none;
275
- }
276
-
277
- .rightContainer {
278
- position: absolute;
279
- top: 0px;
280
- right: 0px;
281
- width: var(--layout-right-width);
282
- z-index: var(--layout-right-zindex);
283
- height: 100%;
284
- pointer-events: none;
285
- }
286
-
287
- .centerdiv {
288
- position: absolute;
289
- top: 0px;
290
- left: 0px;
291
- bottom: 0px;
292
- width: 100%;
293
- background-color: transparent;
294
- overflow: hidden;
295
- pointer-events: none;
296
- }
297
-
298
- .btn {
299
- background-color: transparent;
300
- border: none;
301
- font-size: medium;
302
- margin: 0;
303
- padding: 0 0.25em;
304
- border-radius: 4pt;
305
- }
@@ -1,27 +0,0 @@
1
- declare const _default: import("vue").DefineComponent<{
2
- expanded: {
3
- type: BooleanConstructor;
4
- default: boolean;
5
- };
6
- }, {
7
- body: import("vue").ComputedRef<{
8
- hasContent: boolean | undefined;
9
- dataKey: string;
10
- }>;
11
- panelRef: import("vue").Ref<HTMLElement | undefined>;
12
- bodyRef: import("vue").Ref<HTMLElement | undefined>;
13
- bodyContentRef: import("vue").Ref<HTMLElement | undefined>;
14
- isExpanded: import("vue").ComputedRef<boolean | undefined>;
15
- collapse: (element: HTMLElement) => void;
16
- expand: (element: HTMLElement) => void;
17
- toggle: () => void;
18
- toggleIcon: string;
19
- }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
20
- expanded: {
21
- type: BooleanConstructor;
22
- default: boolean;
23
- };
24
- }>>, {
25
- expanded: boolean;
26
- }>;
27
- export default _default;
@@ -1,33 +0,0 @@
1
- declare const _default: import("vue").DefineComponent<{
2
- accordion: {
3
- type: BooleanConstructor;
4
- default: boolean;
5
- };
6
- baseColor: {
7
- type: StringConstructor;
8
- default: string;
9
- };
10
- }, {
11
- idGroup: import("vue").Ref<string>;
12
- cssColorVars: {
13
- '--base-color': string;
14
- '--border-color': string;
15
- '--bg-color-header': string;
16
- '--bg-color-header-hover': string;
17
- '--bg-color-header-active': string;
18
- '--bg-color-body': string;
19
- };
20
- }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
21
- accordion: {
22
- type: BooleanConstructor;
23
- default: boolean;
24
- };
25
- baseColor: {
26
- type: StringConstructor;
27
- default: string;
28
- };
29
- }>>, {
30
- accordion: boolean;
31
- baseColor: string;
32
- }>;
33
- export default _default;