mce 0.13.7 → 0.13.9

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/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

@@ -1061,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));

package/dist/index.js

@@ -6571,7 +6571,7 @@ function useResizeObserver(callback, box = "content") {
 }
 const MceLayoutKey = Symbol.for("mce:layout");
 const MceLayoutItemKey = Symbol.for("mce:layout-item");
-const ROOT_ZINDEX = 1e3;
+const ROOT_ZINDEX = 500;
 function makeLayoutProps() {
   return {
     overlaps: {
@@ -6589,8 +6589,7 @@ function makeLayoutItemProps() {
     order: {
       type: [Number, String],
       default: 0
-    },
-    absolute: Boolean
+    }
   };
 }
 function useLayout() {
@@ -6726,8 +6725,7 @@ function createLayout(props) {
       layoutSize,
       elementSize,
       active,
-      disableTransitions,
-      absolute
+      disableTransitions
     }) => {
       priorities.set(id, order);
       positions.set(id, position);
@@ -6751,7 +6749,6 @@ function createLayout(props) {
           [position.value]: 0,
           zIndex: zIndex.value,
           transform: `translate${isHorizontal ? "X" : "Y"}(${(active.value ? 0 : -(size === 0 ? 100 : size)) * (isOppositeHorizontal || isOppositeVertical ? -1 : 1)}${unit})`,
-          position: absolute.value || rootZIndex.value !== ROOT_ZINDEX ? "absolute" : "fixed",
           ...transitionsEnabled.value ? void 0 : { transition: "none" }
         };
         if (!isMounted.value)
@@ -9409,6 +9406,11 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "Layout",
   props: {
+    class: [String, Array, Object],
+    style: {
+      type: [String, Array, Object],
+      default: null
+    },
     ...makeLayoutProps()
   },
   setup(__props, { expose: __expose }) {
@@ -9427,8 +9429,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         ref: unref(layoutRef),
-        class: normalizeClass([unref(layoutClasses)]),
-        style: normalizeStyle([unref(layoutStyles)])
+        class: normalizeClass(normalizeClass([unref(layoutClasses), props.class])),
+        style: normalizeStyle(normalizeStyle([unref(layoutStyles), props.style]))
       }, [
         renderSlot(_ctx.$slots, "default")
       ], 6);
@@ -9438,6 +9440,11 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "LayoutItem",
   props: {
+    class: [String, Array, Object],
+    style: {
+      type: [String, Array, Object],
+      default: null
+    },
     position: {
       type: String,
       required: true
@@ -9460,15 +9467,16 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       position: toRef(() => props.position),
       elementSize: toRef(() => props.size),
       layoutSize: toRef(() => props.size),
-      active: toRef(() => props.modelValue),
-      absolute: toRef(() => props.absolute)
+      active: toRef(() => props.modelValue)
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["mce-layout-item", [
-          `mce-layout-item--${props.position}`
-        ]]),
-        style: normalizeStyle([unref(layoutItemStyles)])
+        class: normalizeClass(normalizeClass([
+          "mce-layout-item",
+          `mce-layout-item--${props.position}`,
+          props.class
+        ])),
+        style: normalizeStyle(normalizeStyle([unref(layoutItemStyles), props.style]))
       }, [
         renderSlot(_ctx.$slots, "default")
       ], 6);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.13.7",
+  "version": "0.13.9",
   "description": "The headless canvas editor framework. only the ESM.",
   "author": "wxm",
   "license": "MIT",