@symbo.ls/preview 2.6.9 → 2.6.11
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/package.json +1 -1
- package/src/app.js +2 -2
- package/src/pages/MediaQuery/lists.js +16 -2
- package/src/pages/MediaQuery/state.js +13 -14
- package/src/pages/State/index.js +3 -2
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@symbo.ls/preview",
|
|
3
3
|
"description": "",
|
|
4
4
|
"author": "",
|
|
5
|
-
"version": "2.6.
|
|
5
|
+
"version": "2.6.11",
|
|
6
6
|
"main": "src/app.js",
|
|
7
7
|
"scripts": {
|
|
8
8
|
"link:all": "yarn link smbls domql css-in-props @symbo.ls/icons @symbo.ls/config @symbo.ls/components @symbo.ls/scratch @symbo.ls/playground @symbo.ls/utils @symbo.ls/init @symbo.ls/config-default @domql/router @domql/utils @domql/router",
|
package/src/app.js
CHANGED
|
@@ -9,7 +9,7 @@ import {
|
|
|
9
9
|
DesignSystem,
|
|
10
10
|
Export,
|
|
11
11
|
Library,
|
|
12
|
-
State,
|
|
12
|
+
// State,
|
|
13
13
|
Account
|
|
14
14
|
} from './pages'
|
|
15
15
|
|
|
@@ -38,7 +38,7 @@ const App = {
|
|
|
38
38
|
'/design-system': DesignSystem,
|
|
39
39
|
'/components': Components,
|
|
40
40
|
'/component': Export,
|
|
41
|
-
'/state': State,
|
|
41
|
+
// '/state': State,
|
|
42
42
|
...SUB_ROUTES
|
|
43
43
|
},
|
|
44
44
|
|
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
'use strict'
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
IconText,
|
|
5
|
+
Flex,
|
|
6
|
+
SquareButton,
|
|
7
|
+
Select,
|
|
8
|
+
Input,
|
|
9
|
+
ClickableItem
|
|
10
|
+
} from '@symbo.ls/components'
|
|
11
|
+
import { copyStringToClipboard } from '@symbo.ls/utils'
|
|
4
12
|
import { BREAKPOINTS_DATA, DEVICE_SIZE_DATA } from './state'
|
|
5
13
|
|
|
6
14
|
const stateCom = {
|
|
@@ -182,7 +190,13 @@ const MediaQueryRow = {
|
|
|
182
190
|
},
|
|
183
191
|
...[
|
|
184
192
|
{ props: { icon: 'eyeOpen' } },
|
|
185
|
-
{ props: { icon: '
|
|
193
|
+
{ props: { icon: 'copy outline' },
|
|
194
|
+
on: {
|
|
195
|
+
click: (event, element, state) => {
|
|
196
|
+
copyStringToClipboard(`@${state.name}`)
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
},
|
|
186
200
|
{ props: { icon: 'trashAlt' },
|
|
187
201
|
on: {
|
|
188
202
|
click: (event, element, state) => {
|
|
@@ -11,7 +11,7 @@ export const BREAKPOINTS_DATA = {
|
|
|
11
11
|
}]
|
|
12
12
|
}, {
|
|
13
13
|
icon: 'deviceSmallScreenOutline',
|
|
14
|
-
name: '
|
|
14
|
+
name: 'screenL',
|
|
15
15
|
breakpoints: [{
|
|
16
16
|
type: 'minWidth',
|
|
17
17
|
value: '1920',
|
|
@@ -19,7 +19,7 @@ export const BREAKPOINTS_DATA = {
|
|
|
19
19
|
}]
|
|
20
20
|
}, {
|
|
21
21
|
icon: 'deviceSmallScreenOutline',
|
|
22
|
-
name: '
|
|
22
|
+
name: 'screebM',
|
|
23
23
|
breakpoints: [{
|
|
24
24
|
type: 'minWidth',
|
|
25
25
|
value: '1680',
|
|
@@ -27,7 +27,7 @@ export const BREAKPOINTS_DATA = {
|
|
|
27
27
|
}]
|
|
28
28
|
}, {
|
|
29
29
|
icon: 'deviceSmallScreenOutline',
|
|
30
|
-
name: '
|
|
30
|
+
name: 'screenS',
|
|
31
31
|
breakpoints: [{
|
|
32
32
|
type: 'minWidth',
|
|
33
33
|
value: '1440',
|
|
@@ -35,40 +35,39 @@ export const BREAKPOINTS_DATA = {
|
|
|
35
35
|
}]
|
|
36
36
|
}, {
|
|
37
37
|
icon: 'deviceTabletLandscapeOutline',
|
|
38
|
-
name: '
|
|
38
|
+
name: 'tabletL',
|
|
39
39
|
breakpoints: [{
|
|
40
40
|
type: 'minWidth',
|
|
41
41
|
value: '1366',
|
|
42
|
-
placeholder: '
|
|
42
|
+
placeholder: '1366'
|
|
43
43
|
}]
|
|
44
44
|
}, {
|
|
45
45
|
icon: 'deviceTabletLandscapeOutline',
|
|
46
|
-
name: '
|
|
46
|
+
name: 'tabletM',
|
|
47
47
|
breakpoints: [{
|
|
48
48
|
type: 'minWidth',
|
|
49
|
-
value: '
|
|
50
|
-
placeholder: '
|
|
49
|
+
value: '1280px',
|
|
50
|
+
placeholder: '1280px'
|
|
51
51
|
}]
|
|
52
52
|
}, {
|
|
53
53
|
icon: 'deviceTabletLandscapeOutline',
|
|
54
|
-
name: '
|
|
54
|
+
name: 'tabletS',
|
|
55
55
|
breakpoints: [{
|
|
56
56
|
type: 'minWidth',
|
|
57
57
|
value: '1024',
|
|
58
|
-
placeholder: '
|
|
58
|
+
placeholder: '1024'
|
|
59
59
|
}]
|
|
60
60
|
}, {
|
|
61
61
|
icon: 'deviceMobileOutline',
|
|
62
|
-
name: '
|
|
62
|
+
name: 'mobileL',
|
|
63
63
|
breakpoints: [{
|
|
64
64
|
type: 'minWidth',
|
|
65
65
|
value: '768',
|
|
66
|
-
value2: '657',
|
|
67
66
|
placeholder: '768'
|
|
68
67
|
}]
|
|
69
68
|
}, {
|
|
70
69
|
icon: 'deviceMobileOutline',
|
|
71
|
-
name: '
|
|
70
|
+
name: 'mobileM',
|
|
72
71
|
breakpoints: [{
|
|
73
72
|
type: 'minWidth',
|
|
74
73
|
value: '560',
|
|
@@ -76,7 +75,7 @@ export const BREAKPOINTS_DATA = {
|
|
|
76
75
|
}]
|
|
77
76
|
}, {
|
|
78
77
|
icon: 'deviceMobileOutline',
|
|
79
|
-
name: '
|
|
78
|
+
name: 'mobileS',
|
|
80
79
|
breakpoints: [{
|
|
81
80
|
type: 'minWidth',
|
|
82
81
|
value: '480',
|
package/src/pages/State/index.js
CHANGED
|
@@ -26,8 +26,9 @@ export const State = {
|
|
|
26
26
|
on: {
|
|
27
27
|
input: (ev, el, s) => {
|
|
28
28
|
const rootState = el.__root.state
|
|
29
|
+
const key = el.parent.key.toUpperCase()
|
|
29
30
|
const obj = {
|
|
30
|
-
PROJECT_STATE: { [
|
|
31
|
+
PROJECT_STATE: { [key]: el.node.value }
|
|
31
32
|
}
|
|
32
33
|
rootState.update(obj)
|
|
33
34
|
}
|
|
@@ -35,7 +36,7 @@ export const State = {
|
|
|
35
36
|
}
|
|
36
37
|
},
|
|
37
38
|
|
|
38
|
-
|
|
39
|
+
title: {
|
|
39
40
|
title: 'Title',
|
|
40
41
|
element: {
|
|
41
42
|
extend: Input
|