@micromag/editor 0.3.832 → 0.4.4
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/assets/css/styles.css +19 -19
- package/es/index.d.ts +59 -0
- package/es/index.js +549 -836
- package/es/styles.css +19 -0
- package/package.json +19 -22
- package/scss/styles.scss +0 -6
package/assets/css/styles.css
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
.
|
|
2
|
-
.
|
|
3
|
-
.
|
|
4
|
-
.
|
|
5
|
-
.
|
|
6
|
-
.
|
|
7
|
-
.
|
|
8
|
-
.
|
|
9
|
-
.
|
|
10
|
-
.
|
|
11
|
-
.
|
|
12
|
-
.
|
|
13
|
-
.
|
|
14
|
-
.
|
|
15
|
-
.
|
|
16
|
-
.
|
|
17
|
-
.
|
|
18
|
-
.
|
|
19
|
-
.
|
|
1
|
+
.container{padding:calc(var(--mm-spacer)/2);position:relative}.container .inner{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}
|
|
2
|
+
.container li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container li:before{float:none}.container li:last-child{-ms-flex-negative:0;flex-shrink:0}
|
|
3
|
+
.container .description{margin-bottom:10px}.container .actions{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}
|
|
4
|
+
.disabled{left:0;position:absolute;top:0;width:100%;z-index:0}.content{position:relative}.navbar{background-color:var(--mm-black);z-index:999}.panel{position:relative}
|
|
5
|
+
.container .icon{display:block;height:auto;max-height:100%;width:100%}
|
|
6
|
+
.container{display:inline-block;position:relative}.container .button{display:block;height:30px;padding:5px;width:40px}
|
|
7
|
+
.container{overflow:hidden;position:relative}.container .button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;height:100%;left:0;padding:0;position:relative;position:absolute;position:absolute!important;top:0;width:100%}.container .border{display:block;height:100%;left:0;position:absolute;top:0;width:100%}.container .screen{display:block;height:0;padding-bottom:150%;pointer-events:none;position:relative;width:100%}.container .screen .inner{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;left:0;position:absolute;top:0;width:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.container .screen .icon{position:relative;width:100%;-ms-flex-positive:1;flex-grow:1}.container .screen .label{font-size:.75rem;font-weight:700;padding:5px 0}.container.active .border{border:3px solid var(--mm-primary);z-index:2}
|
|
8
|
+
.button{display:block;position:relative;-webkit-transition:-webkit-filter .2s ease;transition:-webkit-filter .2s ease;transition:filter .2s ease;transition:filter .2s ease,-webkit-filter .2s ease}.button .index{background-color:rgba(0,0,0,.4);color:#fff;font-size:1.25rem}.button .index,.button .name{display:-ms-flexbox;display:flex;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;opacity:0;pointer-events:none;-webkit-transition:opacity .15s ease;transition:opacity .15s ease}.button .name{background-color:hsla(0,0%,100%,.6);color:#000!important;font-size:.8rem;padding:5px;text-align:center;text-shadow:1px solid #000;word-break:break-word}.button .deleteButton{cursor:pointer;font-size:.9em;font-weight:600;opacity:0;position:absolute;right:11%;top:4%;-webkit-transition:opacity .15s ease;transition:opacity .15s ease;z-index:3}.button:hover{-webkit-filter:grayscale(.5);filter:grayscale(.5)}.button.withIndex:hover .deleteButton,.button.withIndex:hover .index,.button.withIndex:hover .name{opacity:1}
|
|
9
|
+
.container{display:inline-block}.button{min-height:75px;width:50px}.button.btn-outline-secondary{border-color:var(--mm-gray-600);color:var(--mm-gray-600)}.button.btn-outline-secondary:hover{background:transparent;border-color:var(--mm-gray-200);color:var(--mm-gray-200)}.addButton{border-style:dashed}.title{font-size:.75em;padding:0 .2em;text-align:left}
|
|
10
|
+
.container{position:relative}.container>.inner{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%}.container .top{display:none;padding:20px 0;width:100%}.container .bottom{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-width:100%;overflow:hidden;width:100%;-ms-flex-positive:1;flex-grow:1;padding:0}.container .bottom>.inner{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;width:100%;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin:0 auto}.container .preview{-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;width:100%}.container .preview,.container .viewerContainer{height:100%;position:relative}.container .devices{bottom:10px;position:absolute;right:10px}.container .noStory,.container .story{height:100%;left:0;position:absolute;top:0;width:100%}@media screen and (min-width:540px){.container .top{display:block;overflow-x:auto;text-align:center;width:100%}.container .bottom{padding:50px 20px}}
|
|
11
|
+
.wrapper{border-radius:4px;list-style:none}.wrapper,.wrapper .inner{-webkit-box-sizing:border-box;box-sizing:border-box}.wrapper .inner{display:-ms-flexbox;display:flex;height:100%;position:relative;width:100%;z-index:1;-ms-flex-align:center;align-items:center;background-color:transparent;color:#222}.wrapper .inner .button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;background-color:transparent;border:0;color:inherit;color:#fff;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.wrapper .inner .handle{border-radius:10px;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.wrapper .inner .handle .icon{display:none;left:10px;position:absolute;top:10px;visibility:hidden}.wrapper .inner .text{overflow:hidden;-ms-flex-positive:1;flex-grow:1;padding-left:.5rem;text-overflow:ellipsis;white-space:nowrap}.wrapper .inner .collapsedCount,.wrapper .inner .count{display:-ms-flexbox;display:flex;height:24px;position:absolute;right:-10px;top:-10px;width:24px;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;background-color:var(--mm-primary);border-radius:50%;color:#fff;font-size:.8rem;font-weight:600;justify-content:center}.wrapper .inner .collapsedCount{background-color:transparent;bottom:2px;right:3px;top:auto}.wrapper .inner .disableInteraction{pointer-events:none}.wrapper .inner .clone .count,.wrapper .inner .clone .text,.wrapper .inner .disableSelection .count,.wrapper .inner .disableSelection .text{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.wrapper .inner .collapse{bottom:0;display:-ms-flexbox;display:flex;height:30px;left:0;position:absolute;width:100%;z-index:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.wrapper .inner .collapse svg{margin-left:10px;-webkit-transition:-webkit-transform .25s ease;transition:-webkit-transform .25s ease;transition:transform .25s ease;transition:transform .25s ease,-webkit-transform .25s ease}.wrapper .inner .collapse.collapsed svg{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.wrapper .children{position:relative;width:100%;z-index:0}.wrapper.withChildren{background-color:var(--mm-gray-700)}.wrapper.withChildren .inner{padding-bottom:30px}.wrapper.clone{display:block;margin-left:10px;margin-top:5px;padding:0;pointer-events:none;width:100%}.wrapper.clone .inner{border-radius:10px;-webkit-box-shadow:0 15px 15px 0 rgba(34,33,81,.1);box-shadow:0 15px 15px 0 rgba(34,33,81,.1);padding-right:24px}.wrapper.ghost:not(.indicator){-webkit-filter:opacity(.6);filter:opacity(.6)}.wrapper.ghost .inner>*{background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.wrapper.ghost .inner{border:1px solid var(--mm-primary);border-radius:4px}.wrapper.ghost.indicator{margin-bottom:-1px;opacity:1;position:relative;z-index:1}.wrapper.ghost.indicator .inner{background-color:var(--mm-primary);border:1px solid var(--mm-primary);border-radius:10px;height:8px;padding:0;position:relative}.wrapper.ghost.indicator .inner>*{height:0;opacity:0}
|
|
12
|
+
.container{display:block}.container .parent{-webkit-box-shadow:0 4px 8px rgba(0,0,0,.5);box-shadow:0 4px 8px rgba(0,0,0,.5);position:relative;z-index:1}.container .child{bottom:-25px;-webkit-filter:brightness(60%);filter:brightness(60%);position:absolute;right:5px;width:75%;z-index:0}
|
|
13
|
+
.item{padding-bottom:3px}.item.parent{padding-bottom:0}.item.group,.item.parent{background-color:var(--mm-gray-700)}.item.group{padding-top:3px}.item.group.isLastChild{border-bottom-left-radius:4px;border-bottom-right-radius:4px;margin-bottom:4px;padding-bottom:6px}
|
|
14
|
+
.item,.items{list-style:none;margin:0;padding:0}.container{position:relative}.container .items{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;margin:-5px;padding:0}.container .item{display:block;padding:5px;position:relative;width:33.3%;z-index:2}@media screen and (min-width:540px){.container .item{width:20%}}.container .button{display:block}.container .placeholder,.container .preview{-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}.container .placeholder,.container .preview,.container .screen{height:100%;left:0;position:absolute;top:0;width:100%}.container .preview{background:rgba(#000,.9)}.container .settings{position:absolute;right:0;top:0}.container.noWrap .items{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.container.isVertical .items{-ms-flex-flow:column nowrap;flex-flow:column nowrap}.container.isVertical .item{width:100%}.container.withPlaceholder .item{margin:5px;padding:0}.container.withPlaceholder .button{width:100px}
|
|
15
|
+
.container{position:relative}.container .row{margin-bottom:calc(var(--mm-spacer)*2)}.container .row .title{border-bottom:1px solid var(--mm-border-color);font-size:.85rem;padding-bottom:calc(var(--mm-spacer)/4)}.container .row:last-child{margin-bottom:0}.container .screen{max-width:100px;width:100%}.container .button{mix-blend-mode:difference}
|
|
16
|
+
.container .selected{background-color:var(--mm-primary)}
|
|
17
|
+
.container .navbar{background-color:var(--mm-black);z-index:999}.container .navbar>div{padding:0}
|
|
18
|
+
.container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative}.container>.inner{position:relative;width:100%;-ms-flex-positive:1;flex-grow:1}.container .center,.container .left,.container .right{display:none;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.container .center.visible,.container .left.visible,.container .right.visible{display:block}.container .left,.container .right{overflow-y:auto;scroll-behavior:smooth;scrollbar-width:none}.container .left::-webkit-scrollbar,.container .right::-webkit-scrollbar{display:none}.container .left>.inner,.container .right>.inner{min-height:100%}.container .center{background-color:var(--mm-gray-900)}.container .preview,.container.fullscreen{height:100%;left:0;position:absolute;top:0;width:100%}@media screen and (min-width:540px){.container>.top{display:none}.container>.inner{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:100%;position:relative;width:100%}.container .center,.container .left,.container .right{height:100%;position:relative}.container .left{width:140px}.container .center{width:auto;-ms-flex-positive:1;flex-grow:1}.container .right{width:320px}}
|
|
19
|
+
.container{padding:calc(var(--mm-spacer)/2);position:relative}.container .inner{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}
|
package/es/index.d.ts
ADDED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { Story, Theme, DeviceScreen, ViewerTheme } from '@micromag/core';
|
|
3
|
+
|
|
4
|
+
interface EditorProps {
|
|
5
|
+
value?: Story | Theme | null;
|
|
6
|
+
deviceScreens?: DeviceScreen[];
|
|
7
|
+
viewerTheme?: ViewerTheme | null;
|
|
8
|
+
mobileView?: 'screens' | 'preview' | 'form';
|
|
9
|
+
fullscreen?: boolean;
|
|
10
|
+
isTheme?: boolean;
|
|
11
|
+
isCreateOpened?: boolean;
|
|
12
|
+
onChange?: ((...args: unknown[]) => void) | null;
|
|
13
|
+
className?: string | null;
|
|
14
|
+
}
|
|
15
|
+
declare function Editor({ value, viewerTheme, isTheme, isCreateOpened, deviceScreens, mobileView: initialMobileView, onChange, fullscreen, className, }: EditorProps): react_jsx_runtime.JSX.Element;
|
|
16
|
+
|
|
17
|
+
interface EditorContainerProps {
|
|
18
|
+
value?: Story | Theme | null;
|
|
19
|
+
routes?: unknown;
|
|
20
|
+
memoryRouter?: boolean;
|
|
21
|
+
basePath?: string | null;
|
|
22
|
+
uppy?: {
|
|
23
|
+
transport?: string;
|
|
24
|
+
} | null;
|
|
25
|
+
googleApiKey?: string | null;
|
|
26
|
+
googleMapsLibraries?: string[];
|
|
27
|
+
screenNamespaces?: string[] | null;
|
|
28
|
+
}
|
|
29
|
+
declare function EditorContainer({ value, memoryRouter, routes, basePath, uppy, googleApiKey, googleMapsLibraries, screenNamespaces, ...props }: EditorContainerProps): react_jsx_runtime.JSX.Element;
|
|
30
|
+
|
|
31
|
+
declare function ScreensMenu({ items, withPreview, withPlaceholder, withName, settings, isVertical, noWrap, className, itemClassName, buttonClassName, settingsClassName, sortable, isTree, onClickItem, onOrderChange, }: {
|
|
32
|
+
items?: any[];
|
|
33
|
+
withPreview?: boolean;
|
|
34
|
+
withPlaceholder?: boolean;
|
|
35
|
+
withName?: boolean;
|
|
36
|
+
settings?: any;
|
|
37
|
+
isVertical?: boolean;
|
|
38
|
+
noWrap?: boolean;
|
|
39
|
+
className?: any;
|
|
40
|
+
itemClassName?: any;
|
|
41
|
+
buttonClassName?: any;
|
|
42
|
+
settingsClassName?: any;
|
|
43
|
+
sortable?: boolean;
|
|
44
|
+
isTree?: boolean;
|
|
45
|
+
onClickItem?: any;
|
|
46
|
+
onOrderChange?: any;
|
|
47
|
+
}): react_jsx_runtime.JSX.Element;
|
|
48
|
+
|
|
49
|
+
declare function ScreenTypes({ screens, selectedTypes, legacyTypes, className, onClickItem, }: {
|
|
50
|
+
screens?: any;
|
|
51
|
+
selectedTypes?: any;
|
|
52
|
+
legacyTypes?: string[];
|
|
53
|
+
className?: any;
|
|
54
|
+
onClickItem?: any;
|
|
55
|
+
}): react_jsx_runtime.JSX.Element;
|
|
56
|
+
|
|
57
|
+
declare const createScreen: (definition: any, data?: {}) => any;
|
|
58
|
+
|
|
59
|
+
export { Editor, ScreenTypes, ScreensMenu as Screens, createScreen, EditorContainer as default };
|