mce 0.11.4 → 0.12.0

package/README.md

@@ -57,7 +57,7 @@ npm i mce
     frameGap: 48,
     typographyStrategy: 'autoHeight',
     handleShape: 'rect',
-    zoomToFitOffset: { left: 0, top: 0, right: 0, bottom: 0 },
+    screenCenterOffset: { left: 0, top: 0, right: 0, bottom: 0 },
     localDb: false,
     customUpload: async (blob) => URL.createObjectURL(blob),
     customContextMenu: (menu) => menu,

package/dist/components/Layers.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/Toolbelt.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/shared/LayoutItem.vue.d.ts

@@ -20,7 +20,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    modelValue: BooleanConstructor;
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     name: {
         type: StringConstructor;
@@ -38,7 +41,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    modelValue: BooleanConstructor;
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{}>, {
     size: string | number;
     absolute: boolean;

package/dist/composables/icons.d.ts

@@ -5,10 +5,14 @@ export interface IconAliases {
     play: IconValue;
     pause: IconValue;
     gps: IconValue;
-    menuRight: IconValue;
+    arrowRight: IconValue;
     mouseLeftClick: IconValue;
     mouseRightClick: IconValue;
     check: IconValue;
+    frame: IconValue;
+    group: IconValue;
+    shape: IconValue;
+    text: IconValue;
 }
 export interface IconSet {
     component: Component;

package/dist/index.css

@@ -110,6 +110,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  font-size: 14px;
 }
 .mce-list-item__title {
   flex: 1;
@@ -124,7 +125,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 22px;
+  font-size: 12px;
+  margin-right: -6px;
 }.mce-context-menu__title {
   flex: 1;
 }
@@ -768,10 +770,10 @@
   min-height: 100%;
   overflow: hidden;
 }.mce-editor {
-  --mce-theme-primary: 97, 101, 253;
-  --mce-theme-on-primary: 247, 247, 248;
+  --mce-theme-primary: 69, 151, 248;
+  --mce-theme-on-primary: 255, 255, 255;
   --mce-theme-surface: 255, 255, 255;
-  --mce-theme-on-surface: 56, 56, 56;
+  --mce-theme-on-surface: 30, 30, 30;
   --mce-theme-surface-variant: 35, 37, 41;
   --mce-theme-on-surface-variant: 255, 255, 255;
   --mce-theme-background: 240, 242, 245;
@@ -781,10 +783,10 @@
   --mce-high-emphasis-opacity: 1;
   --mce-medium-emphasis-opacity: 0.5;
   --mce-low-emphasis-opacity: 0.3;
+  --mce-hover-opacity: 0.04;
+  --mce-activated-opacity: 0.06;
   --mce-shadow: 0 8px 32px 2px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.2);
   --mce-blur: 8px;
-}
-.mce-editor {
   position: relative;
   width: 100%;
   height: 100%;
@@ -823,6 +825,105 @@
   width: 100%;
   height: 100%;
   display: block;
+}.mce-layer-item {
+  flex: none;
+  display: flex;
+  align-items: center;
+  height: 24px;
+  font-size: 12px;
+  border-radius: 4px;
+  padding-left: var(--indent-padding, 0);
+  width: 100%;
+  min-width: max-content;
+}
+.mce-layer-item:hover {
+  background-color: rgba(var(--mce-theme-on-background), var(--mce-hover-opacity));
+}
+.mce-layer-item__expand {
+  display: flex;
+  align-items: center;
+  width: 16px;
+  height: 100%;
+  opacity: 0;
+  flex: none;
+}
+.mce-layer-item__content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+.mce-layer-item__thumbnail {
+  display: flex;
+  align-items: center;
+  width: 12px;
+  height: 100%;
+  font-size: 12px;
+  overflow: hidden;
+}
+.mce-layer-item__name {
+  padding: 0 8px;
+}
+.mce-layer-item__name-input {
+  border: none;
+  padding: 0;
+  outline: none;
+  font-size: inherit;
+  font-weight: inherit;
+}
+.mce-layer {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border-radius: 4px;
+  width: 100%;
+  min-width: max-content;
+}
+.mce-layer--active {
+  background-color: rgba(var(--mce-theme-primary), var(--mce-activated-opacity));
+}
+.mce-layer--opened .mce-layer-item__expand .mce-icon {
+  transform: rotate(90deg);
+}
+.mce-layers {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  height: 100%;
+  min-width: auto;
+  padding: 8px;
+  overflow: auto;
+  background-color: rgb(var(--mce-theme-surface));
+}
+.mce-layers:hover .mce-layer-item__expand {
+  opacity: 1;
+}
+.mce-layers__action {
+  position: absolute;
+  padding-right: 8px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  background-color: rgb(var(--mce-theme-surface));
+}
+.mce-btn {
+  padding: 4px;
+  border-radius: 4px;
+  height: 24px;
+  width: 24px;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.mce-btn:hover {
+  background-color: rgb(var(--mce-theme-background));
+}
+.mce-btn + .mce-btn {
+  margin-left: -4px;
 }.mce-dialog > * {
   box-shadow: var(--mce-shadow);
 }

package/dist/index.d.ts

@@ -1,12 +1,14 @@
 import './typed-global.d.ts';
 import './typed-plugins.d.ts';
 export { default as EditorLayout } from './components/EditorLayout.vue';
+export { default as EditorLayers } from './components/Layers.vue';
 export { default as Dialog } from './components/shared/Dialog.vue';
 export { default as EditorLayoutItem } from './components/shared/LayoutItem.vue';
 export { default as Menu } from './components/shared/Menu.vue';
 export { default as Ruler } from './components/shared/Ruler.vue';
 export { default as Scrollbar } from './components/shared/Scrollbar.vue';
 export { default as Transformable } from './components/shared/Transformable.vue';
+export { default as EditorToolbelt } from './components/Toolbelt.vue';
 export * from './composables';
 export * from './editor';
 export * from './mixins';