import { css } from "@linaria/core"; import { omit, upperFirst } from "lodash"; import { defineComponent } from "vue"; import { string } from "vue-types"; import { useEditor } from "../../.."; import { DesignComp } from "../../../defines/DesignTemp/DesignComp"; export const View = defineComponent({ props: { compId: string(), }, emits: ["dblclick"], setup(props, { slots, emit }) { const { store, actions, helper } = useEditor(); const comp = (props.compId && store.designCompMap.get(props.compId)) || new DesignComp(); function createStyle(): any { const style: any = {}; const { textAlign, margin, zIndex } = comp.layout || {}; if (textAlign) { style.textAlign = textAlign; } // if (offsetY) { // style[`margin` + ((offsetY as number) > 0 ? "Top" : "Bottom")] = // helper.designToNaturalSize(Math.abs(offsetY as number) * -1); // } if (zIndex) { style["zIndex"] = zIndex; } if (margin) { style.margin = margin; } return style; } function createContentStyle() { const style: any = {}; const { background, layout } = comp; const [w, h] = (layout?.size as number[]) || []; if (background) { Object.entries(background).forEach(([key, value]) => { if (key === "image") { value = `url(${value})`; } style["background" + upperFirst(key)] = value; }); } if (layout?.padding) { style.padding = layout.padding; } if (w) style["width"] = helper.designToNaturalSize(w); if (h) style["height"] = helper.designToNaturalSize(h); // if (layout?.offsetX) { // style["marginLeft"] = helper.designToNaturalSize( // layout.offsetX as number // ); // } return style; } return () => { const isComp = !!props.compId; const isSelected = isComp && store.currCompId === props.compId; const bgOpts = Object.values(omit(comp.background, ["image", "color"])); const bgClasses = bgOpts.length ? `bg-${bgOpts.join(" bg-")}` : ""; return isComp ? (
{ e.stopPropagation(); if (isComp && !isSelected) { actions.pickComp(props.compId as string); } }} onDblclick={() => emit("dblclick")} >
{slots.default?.()}
) : (
emit("dblclick")}> {slots.default?.()}
); }; }, }); const viewStyle = css` position: relative; font-size: 0; &.view_editing { .view_content { &:hover { outline: 1px dashed @inf-primary-color; } } .view_inside:hover { outline: 1px dashed @inf-primary-color; outline-offset: -1px; } } .view_content { display: inline-block; width: 100%; height: 100%; background: no-repeat center / cover; } &.view_selected { > .view_content { outline: 1px solid @inf-primary-color; } } .view_inside { position: relative; } .view_content { overflow: hidden; } `;