queenshow/src/modules/editor/components/CompUI/customUI/Cards/Card/component.tsx

import { string } from "vue-types";
import { useCompData } from ".";
import { useEditor } from "../../../../..";
import { Image, Text } from "../../../basicUI";
import { createUIComp } from "../../../defines/createUIComp";

export const Component = createUIComp({
  props: {
    compId: string().isRequired,
  },
  setup(props) {
    const { designToNaturalSize } = useEditor().helper;
    const { value } = useCompData(props.compId);

    return () => (
      <div class="flex">
        <Image.Component
          style={{
            width: designToNaturalSize(value.imgSize[0]),
            height: designToNaturalSize(value.imgSize[1]),
          }}
          v-model={[value.img, "value"]}
        />
        <Text.Component class="flex-1 ml-0.1rem" v-model={[value.desc, "value"]} />
      </div>
    );
  },
});