mce 0.13.6 → 0.13.8

package/README.md

@@ -104,9 +104,9 @@ npm i mce
       <template #transformer="{ box }" />
       <template #floatbar />
       <template #drawboard />
-      <EditorLayoutItem model-value position="top" :size="56" />
-      <EditorLayoutItem model-value position="left" :size="380" />
-      <EditorLayoutItem model-value position="right" :size="260" />
+      <EditorLayoutItem position="top" :size="56" />
+      <EditorLayoutItem position="left" :size="380" />
+      <EditorLayoutItem position="right" :size="260" />
     </EditorLayout>
   </div>
 </template>

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

@@ -5,6 +5,11 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     overlaps: import("vue").Prop<string[]>;
     fullHeight: BooleanConstructor;
+    class: (ObjectConstructor | ArrayConstructor | StringConstructor)[];
+    style: {
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor)[];
+        default: null;
+    };
 }>, {
     items: import("vue").ComputedRef<{
         size: number;
@@ -27,7 +32,13 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     overlaps: import("vue").Prop<string[]>;
     fullHeight: BooleanConstructor;
+    class: (ObjectConstructor | ArrayConstructor | StringConstructor)[];
+    style: {
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor)[];
+        default: null;
+    };
 }>> & Readonly<{}>, {
+    style: string | unknown[] | Record<string, any>;
     fullHeight: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -11,7 +11,11 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    absolute: BooleanConstructor;
+    class: (ObjectConstructor | ArrayConstructor | StringConstructor)[];
+    style: {
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor)[];
+        default: null;
+    };
     position: {
         type: PropType<"top" | "right" | "bottom" | "left">;
         required: true;
@@ -32,7 +36,11 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    absolute: BooleanConstructor;
+    class: (ObjectConstructor | ArrayConstructor | StringConstructor)[];
+    style: {
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor)[];
+        default: null;
+    };
     position: {
         type: PropType<"top" | "right" | "bottom" | "left">;
         required: true;
@@ -47,7 +55,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>> & Readonly<{}>, {
     size: string | number;
-    absolute: boolean;
+    style: string | unknown[] | Record<string, any>;
     order: string | number;
     modelValue: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/composables/editor.d.ts

@@ -1,3 +1,2 @@
 import { Editor } from '../editor';
 export declare function useEditor(): Editor;
-export declare function provideEditor(editor?: Editor): Editor;

package/dist/composables/layout.d.ts

@@ -20,7 +20,6 @@ interface LayoutProvide {
         elementSize: Ref<number | string | undefined>;
         active: Ref<boolean>;
         disableTransitions?: Ref<boolean>;
-        absolute: Ref<boolean | undefined>;
     }) => {
         layoutItemStyles: Ref<CSSProperties>;
         layoutItemScrimStyles: Ref<CSSProperties>;
@@ -50,7 +49,6 @@ export declare function makeLayoutItemProps(): {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    absolute: BooleanConstructor;
 };
 export declare function useLayout(): {
     getLayoutItem: (id: string) => LayoutItem | undefined;
@@ -65,7 +63,6 @@ export declare function useLayoutItem(options: {
     elementSize: Ref<number | string | undefined>;
     active: Ref<boolean>;
     disableTransitions?: Ref<boolean>;
-    absolute: Ref<boolean | undefined>;
 }): {
     layoutItemStyles: Ref<CSSProperties, CSSProperties>;
     layoutRect: Ref<DOMRectReadOnly | undefined, DOMRectReadOnly | undefined>;

package/dist/index.css

@@ -150,6 +150,8 @@
   overflow: hidden;
   text-overflow: ellipsis;
   background-color: rgba(var(--mce-theme-surface), 1);
+}.mce-floatbar {
+  overflow: visible;
 }.mce-transformable {
   left: 0;
   top: 0;
@@ -256,6 +258,9 @@
 .mce-frame--outline {
   outline: 1px solid rgba(0, 0, 0, 0.168627451);
 }
+.mce-frame--hover .mce-frame__name > div, .mce-frame--selected .mce-frame__name > div {
+  opacity: 1;
+}
 .mce-frame__name {
   position: absolute;
   top: 0;
@@ -272,18 +277,22 @@
   position: relative;
   min-width: 28px;
   box-sizing: content-box;
-  color: rgba(var(--mce-theme-on-surface), 0.8);
+  color: rgb(var(--mce-theme-on-surface));
+  opacity: 0.5;
 }
 .mce-frame__name > input {
   position: absolute;
   left: 0;
   top: 0;
-  outline: none;
+  padding: 0;
   width: 100%;
   height: 100%;
-  border: 1px solid rgba(0, 0, 0, 0.168627451);
-  border-radius: 4px;
+  border: none;
+  outline: 1px solid rgb(var(--mce-theme-primary));
   cursor: default;
+  font-size: inherit;
+  font-weight: inherit;
+  border-radius: 2px;
 }.mce-back-selected-aera {
   pointer-events: auto !important;
   position: absolute;
@@ -570,7 +579,10 @@
 }
 .mce-scrollbar__thumb--active, .mce-scrollbar__thumb:hover {
   background-color: rgba(var(--mce-theme-on-background), var(--mce-medium-emphasis-opacity));
-}.mce-parent-element-obb {
+}.mce-selector__slot {
+  position: absolute;
+}
+.mce-selector__parent-element {
   position: absolute;
   pointer-events: none;
   border-width: 1px;
@@ -578,18 +590,18 @@
   color: rgba(var(--mce-theme-primary), 1);
   opacity: 0.5;
 }
-.mce-selected-area {
+.mce-selector__selected-area {
   position: absolute;
   border-width: 1px;
   border-style: solid;
   color: rgba(var(--mce-theme-primary), 1);
   background-color: rgba(var(--mce-theme-primary), 0.1);
 }
-.mce-selection-obb {
+.mce-selector__transform {
   position: absolute;
   color: rgba(var(--mce-theme-primary), 1);
 }
-.mce-element-obb {
+.mce-selector__element {
   position: absolute;
   border-width: 1px;
   border-style: solid;
@@ -1049,7 +1061,6 @@
   position: relative;
   width: 100%;
   height: 100%;
-  display: flex;
   flex-direction: column;
   background-color: rgb(var(--mce-theme-surface));
   color: rgb(var(--mce-theme-on-surface));