@perses-dev/dashboards 0.7.0 → 0.7.1

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.
Files changed (9) hide show
  1. package/dist/cjs/components/GridLayout/GridLayout.js +7 -5
  2. package/dist/cjs/css/styles.js +184 -0
  3. package/dist/components/GridLayout/GridLayout.d.ts +0 -2
  4. package/dist/components/GridLayout/GridLayout.d.ts.map +1 -1
  5. package/dist/components/GridLayout/GridLayout.js +1 -1
  6. package/dist/css/styles.d.ts +172 -0
  7. package/dist/css/styles.d.ts.map +1 -0
  8. package/dist/css/styles.js +1 -0
  9. package/package.json +4 -4
package/dist/cjs/components/GridLayout/GridLayout.js CHANGED
@@ -1,4 +1,7 @@
1
1
  "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
2
5
  Object.defineProperty(exports, "__esModule", { value: true });
3
6
  exports.GridLayout = void 0;
4
7
  const jsx_runtime_1 = require("react/jsx-runtime");
@@ -14,11 +17,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
14
17
  // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
18
  // See the License for the specific language governing permissions and
16
19
  // limitations under the License.
17
- require("react-grid-layout/css/styles.css");
18
- require("react-resizable/css/styles.css");
19
20
  const react_1 = require("react");
20
21
  const react_grid_layout_1 = require("react-grid-layout");
21
22
  const material_1 = require("@mui/material");
23
+ const styles_1 = __importDefault(require("../../css/styles"));
22
24
  const context_1 = require("../../context");
23
25
  const GridTitle_1 = require("./GridTitle");
24
26
  const ResponsiveGridLayout = (0, react_grid_layout_1.WidthProvider)(react_grid_layout_1.Responsive);
@@ -35,8 +37,8 @@ function GridLayout(props) {
35
37
  const { x, y, width: w, height: h } = item;
36
38
  gridItems.push((0, jsx_runtime_1.jsx)("div", { "data-grid": { x, y, w, h }, children: renderGridItemContent(item) }, idx));
37
39
  });
38
- return ((0, jsx_runtime_1.jsxs)(material_1.Box, { ...others, component: "section", sx: { '& + &': { marginTop: (theme) => theme.spacing(1) } }, children: [spec.display !== undefined && ((0, jsx_runtime_1.jsx)(GridTitle_1.GridTitle, { title: spec.display.title, collapse: spec.display.collapse === undefined
39
- ? undefined
40
- : { isOpen, onToggleOpen: () => setIsOpen((current) => !current) } })), (0, jsx_runtime_1.jsx)(material_1.Collapse, { in: isOpen, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(ResponsiveGridLayout, { className: "layout", breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }, cols: { lg: 24, md: 24, sm: 24, xs: 24, xxs: 2 }, rowHeight: 30, draggableHandle: '.drag-handle', resizeHandles: ['se'], isDraggable: isEditMode, isResizable: isEditMode, children: gridItems }) })] }));
40
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.GlobalStyles, { styles: styles_1.default }), (0, jsx_runtime_1.jsxs)(material_1.Box, { ...others, component: "section", sx: { '& + &': { marginTop: (theme) => theme.spacing(1) } }, children: [spec.display !== undefined && ((0, jsx_runtime_1.jsx)(GridTitle_1.GridTitle, { title: spec.display.title, collapse: spec.display.collapse === undefined
41
+ ? undefined
42
+ : { isOpen, onToggleOpen: () => setIsOpen((current) => !current) } })), (0, jsx_runtime_1.jsx)(material_1.Collapse, { in: isOpen, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(ResponsiveGridLayout, { className: "layout", breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }, cols: { lg: 24, md: 24, sm: 24, xs: 24, xxs: 2 }, rowHeight: 30, draggableHandle: '.drag-handle', resizeHandles: ['se'], isDraggable: isEditMode, isResizable: isEditMode, children: gridItems }) })] })] }));
41
43
  }
42
44
  exports.GridLayout = GridLayout;
package/dist/cjs/css/styles.js ADDED
@@ -0,0 +1,184 @@
1
+ "use strict";
2
+ // Copyright 2022 The Perses Authors
3
+ // Licensed under the Apache License, Version 2.0 (the "License");
4
+ // you may not use this file except in compliance with the License.
5
+ // You may obtain a copy of the License at
6
+ //
7
+ // http://www.apache.org/licenses/LICENSE-2.0
8
+ //
9
+ // Unless required by applicable law or agreed to in writing, software
10
+ // distributed under the License is distributed on an "AS IS" BASIS,
11
+ // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12
+ // See the License for the specific language governing permissions and
13
+ // limitations under the License.
14
+ Object.defineProperty(exports, "__esModule", { value: true });
15
+ exports.default = {
16
+ '&.react-grid-layout': {
17
+ position: 'relative',
18
+ transition: 'height 200ms ease',
19
+ },
20
+ '&.react-grid-item': {
21
+ transition: 'all 200ms ease',
22
+ transitionProperty: 'left, top',
23
+ },
24
+ '&.react-grid-item img': {
25
+ pointerEvents: 'none',
26
+ userSelect: 'none',
27
+ },
28
+ '&.react-grid-item.cssTransforms': {
29
+ transitionProperty: 'transform',
30
+ },
31
+ '&.react-grid-item.resizing': {
32
+ zIndex: 1,
33
+ willChange: 'width, height',
34
+ },
35
+ '&.react-grid-item.react-draggable-dragging': {
36
+ transition: 'none',
37
+ zIndex: 3,
38
+ willChange: 'transform',
39
+ },
40
+ '&.react-grid-item.dropping': {
41
+ visibility: 'hidden',
42
+ },
43
+ '&.react-grid-item.react-grid-placeholder': {
44
+ background: 'red',
45
+ opacity: 0.2,
46
+ transitionDuration: '100ms',
47
+ zIndex: 2,
48
+ userSelect: 'none',
49
+ '-webkit-user-select': 'none',
50
+ '-moz-user-select': 'none',
51
+ '-ms-user-select': 'none',
52
+ '-o-user-select': 'none',
53
+ },
54
+ '&.react-grid-item > .react-resizable-handle': {
55
+ position: 'absolute',
56
+ width: '20px',
57
+ height: '20px',
58
+ },
59
+ '&.react-grid-item > .react-resizable-handle::after': {
60
+ content: '""',
61
+ position: 'absolute',
62
+ right: '3px',
63
+ bottom: '3px',
64
+ width: '5px',
65
+ height: '5px',
66
+ borderRight: '2px solid rgba(0, 0, 0, 0.4)',
67
+ borderBottom: '2px solid rgba(0, 0, 0, 0.4)',
68
+ },
69
+ '&.react-resizable-hide > .react-resizable-handle': {
70
+ display: 'none',
71
+ },
72
+ '&.react-grid-item > .react-resizable-handle.react-resizable-handle-sw': {
73
+ bottom: '0',
74
+ left: '0',
75
+ cursor: 'sw-resize',
76
+ transform: 'rotate(90deg)',
77
+ },
78
+ '&.react-grid-item > .react-resizable-handle.react-resizable-handle-se': {
79
+ bottom: '0',
80
+ right: '0',
81
+ cursor: 'se-resize',
82
+ },
83
+ '&.react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {
84
+ top: '0',
85
+ left: '0',
86
+ cursor: 'nw-resize',
87
+ transform: 'rotate(180deg)',
88
+ },
89
+ '&.react-grid-item > .react-resizable-handle.react-resizable-handle-ne': {
90
+ top: '0',
91
+ right: '0',
92
+ cursor: 'ne-resize',
93
+ transform: 'rotate(270deg)',
94
+ },
95
+ '&.react-grid-item > .react-resizable-handle.react-resizable-handle-w, &.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
96
+ top: '50%',
97
+ marginTop: '-10px',
98
+ cursor: 'ew-resize',
99
+ },
100
+ '&.react-grid-item > .react-resizable-handle.react-resizable-handle-w': {
101
+ left: '0',
102
+ transform: 'rotate(135deg)',
103
+ },
104
+ '&.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
105
+ right: '0',
106
+ transform: 'rotate(315deg)',
107
+ },
108
+ '&.react-grid-item > .react-resizable-handle.react-resizable-handle-n, &.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
109
+ left: '50%',
110
+ marginLeft: '-10px',
111
+ cursor: 'ns-resize',
112
+ },
113
+ '&.react-grid-item > .react-resizable-handle.react-resizable-handle-n': {
114
+ top: '0',
115
+ transform: 'rotate(225deg)',
116
+ },
117
+ '&.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
118
+ bottom: '0',
119
+ transform: 'rotate(45deg)',
120
+ },
121
+ '&.react-resizable': {
122
+ position: 'relative',
123
+ },
124
+ '&.react-resizable-handle': {
125
+ position: 'absolute',
126
+ width: '20px',
127
+ height: '20px',
128
+ backgroundRepeat: 'no-repeat',
129
+ backgroundOrigin: 'content-box',
130
+ boxSizing: 'border-box',
131
+ backgroundImage: `url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')`,
132
+ backgroundPosition: 'bottom right',
133
+ padding: '0 3px 3px 0',
134
+ },
135
+ '&.react-resizable-handle-sw': {
136
+ bottom: '0',
137
+ left: '0',
138
+ cursor: 'sw-resize',
139
+ transform: 'rotate(90deg)',
140
+ },
141
+ '&.react-resizable-handle-se': {
142
+ bottom: '0',
143
+ right: '0',
144
+ cursor: 'se-resize',
145
+ },
146
+ '&.react-resizable-handle-nw': {
147
+ top: '0',
148
+ left: '0',
149
+ cursor: 'nw-resize',
150
+ transform: 'rotate(180deg)',
151
+ },
152
+ '&.react-resizable-handle-ne': {
153
+ top: '0',
154
+ right: '0',
155
+ cursor: 'ne-resize',
156
+ transform: 'rotate(270deg)',
157
+ },
158
+ '&.react-resizable-handle-w, .react-resizable-handle-e': {
159
+ top: '50%',
160
+ marginTop: '-10px',
161
+ cursor: 'ew-resize',
162
+ },
163
+ '&.react-resizable-handle-w': {
164
+ left: '0',
165
+ transform: 'rotate(135deg)',
166
+ },
167
+ '&.react-resizable-handle-e': {
168
+ right: '0',
169
+ transform: 'rotate(315deg)',
170
+ },
171
+ '&.react-resizable-handle-n, .react-resizable-handle-s': {
172
+ left: '50%',
173
+ marginLeft: '-10px',
174
+ cursor: 'ns-resize',
175
+ },
176
+ '&.react-resizable-handle-n': {
177
+ top: '0',
178
+ transform: 'rotate(225deg)',
179
+ },
180
+ '&.react-resizable-handle-s': {
181
+ bottom: '0',
182
+ transform: 'rotate(45deg)',
183
+ },
184
+ };
package/dist/components/GridLayout/GridLayout.d.ts CHANGED
@@ -1,6 +1,4 @@
1
1
  /// <reference types="react" />
2
- import 'react-grid-layout/css/styles.css';
3
- import 'react-resizable/css/styles.css';
4
2
  import { BoxProps } from '@mui/material';
5
3
  import { GridDefinition, GridItemDefinition } from '@perses-dev/core';
6
4
  export interface GridLayoutProps extends BoxProps {
package/dist/components/GridLayout/GridLayout.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":";AAYA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AAIxC,OAAO,EAAO,QAAQ,EAAY,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAMtE,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,UAAU,EAAE,cAAc,CAAC;IAC3B,qBAAqB,EAAE,CAAC,UAAU,EAAE,kBAAkB,KAAK,KAAK,CAAC,SAAS,CAAC;CAC5E;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAmDhD"}
1
+ {"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAO,QAAQ,EAA0B,MAAM,eAAe,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAOtE,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,UAAU,EAAE,cAAc,CAAC;IAC3B,qBAAqB,EAAE,CAAC,UAAU,EAAE,kBAAkB,KAAK,KAAK,CAAC,SAAS,CAAC;CAC5E;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAsDhD"}
package/dist/components/GridLayout/GridLayout.js CHANGED
@@ -1 +1 @@
1
- import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import"react-grid-layout/css/styles.css";import"react-resizable/css/styles.css";import{useState}from"react";import{Responsive,WidthProvider}from"react-grid-layout";import{Box,Collapse}from"@mui/material";import{useEditMode}from"../../context";import{GridTitle}from"./GridTitle";const ResponsiveGridLayout=WidthProvider(Responsive);export function GridLayout(s){var i,e,o;const{definition:{spec:t},renderGridItemContent:r,...d}=s,[l,a]=useState(null===(o=null===(e=null===(i=t.display)||void 0===i?void 0:i.collapse)||void 0===e?void 0:e.open)||void 0===o||o),{isEditMode:n}=useEditMode(),p=[];return t.items.forEach(((s,i)=>{const{x:e,y:o,width:t,height:d}=s;p.push(_jsx("div",{"data-grid":{x:e,y:o,w:t,h:d},children:r(s)},i))})),_jsxs(Box,{...d,component:"section",sx:{"& + &":{marginTop:s=>s.spacing(1)}},children:[void 0!==t.display&&_jsx(GridTitle,{title:t.display.title,collapse:void 0===t.display.collapse?void 0:{isOpen:l,onToggleOpen:()=>a((s=>!s))}}),_jsx(Collapse,{in:l,unmountOnExit:!0,children:_jsx(ResponsiveGridLayout,{className:"layout",breakpoints:{lg:1200,md:996,sm:768,xs:480,xxs:0},cols:{lg:24,md:24,sm:24,xs:24,xxs:2},rowHeight:30,draggableHandle:".drag-handle",resizeHandles:["se"],isDraggable:n,isResizable:n,children:p})})]})}
1
+ import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{useState}from"react";import{Responsive,WidthProvider}from"react-grid-layout";import{Box,Collapse,GlobalStyles}from"@mui/material";import styles from"../../css/styles";import{useEditMode}from"../../context";import{GridTitle}from"./GridTitle";const ResponsiveGridLayout=WidthProvider(Responsive);export function GridLayout(s){var e,i,o;const{definition:{spec:t},renderGridItemContent:l,...r}=s,[d,a]=useState(null===(o=null===(i=null===(e=t.display)||void 0===e?void 0:e.collapse)||void 0===i?void 0:i.open)||void 0===o||o),{isEditMode:n}=useEditMode(),m=[];return t.items.forEach(((s,e)=>{const{x:i,y:o,width:t,height:r}=s;m.push(_jsx("div",{"data-grid":{x:i,y:o,w:t,h:r},children:l(s)},e))})),_jsxs(_Fragment,{children:[_jsx(GlobalStyles,{styles}),_jsxs(Box,{...r,component:"section",sx:{"& + &":{marginTop:s=>s.spacing(1)}},children:[void 0!==t.display&&_jsx(GridTitle,{title:t.display.title,collapse:void 0===t.display.collapse?void 0:{isOpen:d,onToggleOpen:()=>a((s=>!s))}}),_jsx(Collapse,{in:d,unmountOnExit:!0,children:_jsx(ResponsiveGridLayout,{className:"layout",breakpoints:{lg:1200,md:996,sm:768,xs:480,xxs:0},cols:{lg:24,md:24,sm:24,xs:24,xxs:2},rowHeight:30,draggableHandle:".drag-handle",resizeHandles:["se"],isDraggable:n,isResizable:n,children:m})})]})]})}
package/dist/css/styles.d.ts ADDED
@@ -0,0 +1,172 @@
1
+ declare const _default: {
2
+ readonly '&.react-grid-layout': {
3
+ readonly position: "relative";
4
+ readonly transition: "height 200ms ease";
5
+ };
6
+ readonly '&.react-grid-item': {
7
+ readonly transition: "all 200ms ease";
8
+ readonly transitionProperty: "left, top";
9
+ };
10
+ readonly '&.react-grid-item img': {
11
+ readonly pointerEvents: "none";
12
+ readonly userSelect: "none";
13
+ };
14
+ readonly '&.react-grid-item.cssTransforms': {
15
+ readonly transitionProperty: "transform";
16
+ };
17
+ readonly '&.react-grid-item.resizing': {
18
+ readonly zIndex: 1;
19
+ readonly willChange: "width, height";
20
+ };
21
+ readonly '&.react-grid-item.react-draggable-dragging': {
22
+ readonly transition: "none";
23
+ readonly zIndex: 3;
24
+ readonly willChange: "transform";
25
+ };
26
+ readonly '&.react-grid-item.dropping': {
27
+ readonly visibility: "hidden";
28
+ };
29
+ readonly '&.react-grid-item.react-grid-placeholder': {
30
+ readonly background: "red";
31
+ readonly opacity: 0.2;
32
+ readonly transitionDuration: "100ms";
33
+ readonly zIndex: 2;
34
+ readonly userSelect: "none";
35
+ readonly '-webkit-user-select': "none";
36
+ readonly '-moz-user-select': "none";
37
+ readonly '-ms-user-select': "none";
38
+ readonly '-o-user-select': "none";
39
+ };
40
+ readonly '&.react-grid-item > .react-resizable-handle': {
41
+ readonly position: "absolute";
42
+ readonly width: "20px";
43
+ readonly height: "20px";
44
+ };
45
+ readonly '&.react-grid-item > .react-resizable-handle::after': {
46
+ readonly content: "\"\"";
47
+ readonly position: "absolute";
48
+ readonly right: "3px";
49
+ readonly bottom: "3px";
50
+ readonly width: "5px";
51
+ readonly height: "5px";
52
+ readonly borderRight: "2px solid rgba(0, 0, 0, 0.4)";
53
+ readonly borderBottom: "2px solid rgba(0, 0, 0, 0.4)";
54
+ };
55
+ readonly '&.react-resizable-hide > .react-resizable-handle': {
56
+ readonly display: "none";
57
+ };
58
+ readonly '&.react-grid-item > .react-resizable-handle.react-resizable-handle-sw': {
59
+ readonly bottom: "0";
60
+ readonly left: "0";
61
+ readonly cursor: "sw-resize";
62
+ readonly transform: "rotate(90deg)";
63
+ };
64
+ readonly '&.react-grid-item > .react-resizable-handle.react-resizable-handle-se': {
65
+ readonly bottom: "0";
66
+ readonly right: "0";
67
+ readonly cursor: "se-resize";
68
+ };
69
+ readonly '&.react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {
70
+ readonly top: "0";
71
+ readonly left: "0";
72
+ readonly cursor: "nw-resize";
73
+ readonly transform: "rotate(180deg)";
74
+ };
75
+ readonly '&.react-grid-item > .react-resizable-handle.react-resizable-handle-ne': {
76
+ readonly top: "0";
77
+ readonly right: "0";
78
+ readonly cursor: "ne-resize";
79
+ readonly transform: "rotate(270deg)";
80
+ };
81
+ readonly '&.react-grid-item > .react-resizable-handle.react-resizable-handle-w, &.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
82
+ readonly top: "50%";
83
+ readonly marginTop: "-10px";
84
+ readonly cursor: "ew-resize";
85
+ };
86
+ readonly '&.react-grid-item > .react-resizable-handle.react-resizable-handle-w': {
87
+ readonly left: "0";
88
+ readonly transform: "rotate(135deg)";
89
+ };
90
+ readonly '&.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
91
+ readonly right: "0";
92
+ readonly transform: "rotate(315deg)";
93
+ };
94
+ readonly '&.react-grid-item > .react-resizable-handle.react-resizable-handle-n, &.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
95
+ readonly left: "50%";
96
+ readonly marginLeft: "-10px";
97
+ readonly cursor: "ns-resize";
98
+ };
99
+ readonly '&.react-grid-item > .react-resizable-handle.react-resizable-handle-n': {
100
+ readonly top: "0";
101
+ readonly transform: "rotate(225deg)";
102
+ };
103
+ readonly '&.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
104
+ readonly bottom: "0";
105
+ readonly transform: "rotate(45deg)";
106
+ };
107
+ readonly '&.react-resizable': {
108
+ readonly position: "relative";
109
+ };
110
+ readonly '&.react-resizable-handle': {
111
+ readonly position: "absolute";
112
+ readonly width: "20px";
113
+ readonly height: "20px";
114
+ readonly backgroundRepeat: "no-repeat";
115
+ readonly backgroundOrigin: "content-box";
116
+ readonly boxSizing: "border-box";
117
+ readonly backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')";
118
+ readonly backgroundPosition: "bottom right";
119
+ readonly padding: "0 3px 3px 0";
120
+ };
121
+ readonly '&.react-resizable-handle-sw': {
122
+ readonly bottom: "0";
123
+ readonly left: "0";
124
+ readonly cursor: "sw-resize";
125
+ readonly transform: "rotate(90deg)";
126
+ };
127
+ readonly '&.react-resizable-handle-se': {
128
+ readonly bottom: "0";
129
+ readonly right: "0";
130
+ readonly cursor: "se-resize";
131
+ };
132
+ readonly '&.react-resizable-handle-nw': {
133
+ readonly top: "0";
134
+ readonly left: "0";
135
+ readonly cursor: "nw-resize";
136
+ readonly transform: "rotate(180deg)";
137
+ };
138
+ readonly '&.react-resizable-handle-ne': {
139
+ readonly top: "0";
140
+ readonly right: "0";
141
+ readonly cursor: "ne-resize";
142
+ readonly transform: "rotate(270deg)";
143
+ };
144
+ readonly '&.react-resizable-handle-w, .react-resizable-handle-e': {
145
+ readonly top: "50%";
146
+ readonly marginTop: "-10px";
147
+ readonly cursor: "ew-resize";
148
+ };
149
+ readonly '&.react-resizable-handle-w': {
150
+ readonly left: "0";
151
+ readonly transform: "rotate(135deg)";
152
+ };
153
+ readonly '&.react-resizable-handle-e': {
154
+ readonly right: "0";
155
+ readonly transform: "rotate(315deg)";
156
+ };
157
+ readonly '&.react-resizable-handle-n, .react-resizable-handle-s': {
158
+ readonly left: "50%";
159
+ readonly marginLeft: "-10px";
160
+ readonly cursor: "ns-resize";
161
+ };
162
+ readonly '&.react-resizable-handle-n': {
163
+ readonly top: "0";
164
+ readonly transform: "rotate(225deg)";
165
+ };
166
+ readonly '&.react-resizable-handle-s': {
167
+ readonly bottom: "0";
168
+ readonly transform: "rotate(45deg)";
169
+ };
170
+ };
171
+ export default _default;
172
+ //# sourceMappingURL=styles.d.ts.map
package/dist/css/styles.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/css/styles.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,wBA8KW"}
package/dist/css/styles.js ADDED
@@ -0,0 +1 @@
1
+ export default{"&.react-grid-layout":{position:"relative",transition:"height 200ms ease"},"&.react-grid-item":{transition:"all 200ms ease",transitionProperty:"left, top"},"&.react-grid-item img":{pointerEvents:"none",userSelect:"none"},"&.react-grid-item.cssTransforms":{transitionProperty:"transform"},"&.react-grid-item.resizing":{zIndex:1,willChange:"width, height"},"&.react-grid-item.react-draggable-dragging":{transition:"none",zIndex:3,willChange:"transform"},"&.react-grid-item.dropping":{visibility:"hidden"},"&.react-grid-item.react-grid-placeholder":{background:"red",opacity:.2,transitionDuration:"100ms",zIndex:2,userSelect:"none","-webkit-user-select":"none","-moz-user-select":"none","-ms-user-select":"none","-o-user-select":"none"},"&.react-grid-item > .react-resizable-handle":{position:"absolute",width:"20px",height:"20px"},"&.react-grid-item > .react-resizable-handle::after":{content:'""',position:"absolute",right:"3px",bottom:"3px",width:"5px",height:"5px",borderRight:"2px solid rgba(0, 0, 0, 0.4)",borderBottom:"2px solid rgba(0, 0, 0, 0.4)"},"&.react-resizable-hide > .react-resizable-handle":{display:"none"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-sw":{bottom:"0",left:"0",cursor:"sw-resize",transform:"rotate(90deg)"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-se":{bottom:"0",right:"0",cursor:"se-resize"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-nw":{top:"0",left:"0",cursor:"nw-resize",transform:"rotate(180deg)"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-ne":{top:"0",right:"0",cursor:"ne-resize",transform:"rotate(270deg)"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-w, &.react-grid-item > .react-resizable-handle.react-resizable-handle-e":{top:"50%",marginTop:"-10px",cursor:"ew-resize"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-w":{left:"0",transform:"rotate(135deg)"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-e":{right:"0",transform:"rotate(315deg)"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-n, &.react-grid-item > .react-resizable-handle.react-resizable-handle-s":{left:"50%",marginLeft:"-10px",cursor:"ns-resize"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-n":{top:"0",transform:"rotate(225deg)"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-s":{bottom:"0",transform:"rotate(45deg)"},"&.react-resizable":{position:"relative"},"&.react-resizable-handle":{position:"absolute",width:"20px",height:"20px",backgroundRepeat:"no-repeat",backgroundOrigin:"content-box",boxSizing:"border-box",backgroundImage:"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')",backgroundPosition:"bottom right",padding:"0 3px 3px 0"},"&.react-resizable-handle-sw":{bottom:"0",left:"0",cursor:"sw-resize",transform:"rotate(90deg)"},"&.react-resizable-handle-se":{bottom:"0",right:"0",cursor:"se-resize"},"&.react-resizable-handle-nw":{top:"0",left:"0",cursor:"nw-resize",transform:"rotate(180deg)"},"&.react-resizable-handle-ne":{top:"0",right:"0",cursor:"ne-resize",transform:"rotate(270deg)"},"&.react-resizable-handle-w, .react-resizable-handle-e":{top:"50%",marginTop:"-10px",cursor:"ew-resize"},"&.react-resizable-handle-w":{left:"0",transform:"rotate(135deg)"},"&.react-resizable-handle-e":{right:"0",transform:"rotate(315deg)"},"&.react-resizable-handle-n, .react-resizable-handle-s":{left:"50%",marginLeft:"-10px",cursor:"ns-resize"},"&.react-resizable-handle-n":{top:"0",transform:"rotate(225deg)"},"&.react-resizable-handle-s":{bottom:"0",transform:"rotate(45deg)"}};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@perses-dev/dashboards",
3
- "version": "0.7.0",
3
+ "version": "0.7.1",
4
4
  "description": "The dashboards feature in Perses",
5
5
  "license": "Apache-2.0",
6
6
  "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -24,9 +24,9 @@
24
24
  "lint:fix": "eslint --fix src --ext .ts,.tsx"
25
25
  },
26
26
  "dependencies": {
27
- "@perses-dev/components": "^0.7.0",
28
- "@perses-dev/core": "^0.7.0",
29
- "@perses-dev/plugin-system": "^0.7.0",
27
+ "@perses-dev/components": "^0.7.1",
28
+ "@perses-dev/core": "^0.7.1",
29
+ "@perses-dev/plugin-system": "^0.7.1",
30
30
  "@types/react-grid-layout": "^1.3.2",
31
31
  "immer": "^9.0.15",
32
32
  "react-grid-layout": "^1.3.4",