queenshow/src/modules/editor/components/CompUI/basicUI/View.tsx

import { css } from "@linaria/core";
import { omit, upperFirst } from "lodash";
import { defineComponent } from "vue";
import { any, string } from "vue-types";
import { useEditor } from "../../..";
import { Background, Layout } from "../../../typings";

export const View = defineComponent({
  props: {
    compId: string(),
    background: any<Background>(),
    layout: any<Layout>(),
  },
  setup(props, { slots }) {
    const { store, actions, helper } = useEditor();

    function createStyle(): any {
      const style: any = {};
      const { textAlign, offsetY, zIndex } = props.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;
      }
      return style;
    }

    function createContentStyle() {
      const style: any = {};
      const { background, layout } = props;
      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;
        });
        console.log(style, background);
      }

      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(props.background, ["image", "color"]));
      const bgClasses = bgOpts.length ? `bg-${bgOpts.join(" bg-")}` : "";

      return isComp ? (
        <div
          class={[
            store.isEditMode && viewStyle,
            store.isEditMode && isSelected && "view_selected",
            bgClasses,
          ]}
          style={createStyle()}
          onClick={
            isComp && !isSelected
              ? () => actions.pickCurrComp(props.compId as string)
              : undefined
          }
        >
          <div class="view_content" style={createContentStyle()}>
            {slots.default?.()}
          </div>
        </div>
      ) : (
        <div class="view_inside">{slots.default?.()}</div>
      );
    };
  },
});

const viewStyle = css`
  position: relative;

  > * {
    pointer-events: none;
  }

  .view_content {
    display: inline-block;
    width: 100%;
    height: 100%;
    background: no-repeat center / cover;

    &:hover {
      outline: 1px dashed @inf-primary-color;
    }
  }

  &.view_selected {
    > * {
      pointer-events: auto;
    }

    &::after {
      display: none;
    }

    .view_content {
      outline: 1px solid @inf-primary-color;
    }

    .view_inside:hover {
      outline: 1px dashed @inf-primary-color;
      outline-offset: -1px;
    }
  }

  .view_inside {
    position: relative;
  }
`;