queenshow/src/modules/editor/components/Viewport/Slider/SliderLeft/CustomComps.tsx

import { Container, Draggable } from "vue-dndrop";
import { any, string } from "vue-types";

import { useEditor } from "@/modules/editor";
import { ICompKeys } from "@/modules/editor/typings";
import { Empty, Image } from "@queenjs/ui";
import { useReactive } from "@queenjs/use";
import { defineUI } from "queenjs";

export default defineUI({
  props: {
    compType: string<"user" | "senior">(),
  },
  setup(props) {
    const editor = useEditor();
    const { compUICtrl } = editor.controls;

    const state = useReactive(() => ({
      currComps() {
        return Array.from(compUICtrl.state.components.values()).filter(
          (item) => props.compType === item.compType
        );
      },
    }));

    return () => {
      return <Comp components={state.currComps} />;
    };
  },
});

const Comp = defineUI({
  props: {
    components: any<
      {
        compKey: string;
        name: string;
        thumbnail: string;
      }[]
    >().isRequired,
  },
  setup(props) {
    const editor = useEditor();

    return () => {
      if (props.components.length == 0) return <Empty />;
      return (
        <Container
          class="space-y-10px scrollbar"
          behaviour="copy"
          group-name="canvas"
          animation-duration={0}
          get-child-payload={(index: number) => {
            return props.components[index].compKey;
          }}
        >
          {props.components.map((item) => {
            return (
              <Draggable>
                <div
                  class="text-center leading-50px bg-dark-50 rounded draggable-item"
                  key={item.compKey}
                  title={item.name}
                  onClick={() =>
                    editor.actions.clickCompToDesign(item.compKey as ICompKeys)
                  }
                >
                  <Image
                    class="w-full rounded pointer-events-none"
                    src={item.thumbnail}
                    size={240}
                  />
                </div>
              </Draggable>
            );
          })}
        </Container>
      );
    };
  },
});