import { useEditor } from "@/modules/editor"; import { css } from "@linaria/core"; import { watch } from "vue"; import { string } from "vue-types"; import { useCompData, useCreateChild } from "."; import { Text } from "../../../basicUI"; import { createUIComp } from "../../../defines/createUIComp"; export const Component = createUIComp({ props: { compId: string().isRequired, }, setup(props) { const { helper } = useEditor(); const { value, children } = useCompData(props.compId); const createList = useCreateChild("list"); watch( () => [value.columns], () => { const { columns } = value; const { list } = children; const offset = columns - list.length; if (offset > 0) { children.list.push(...createList(offset)); } else { list.splice(columns, offset * -1); } } ); return () => (
{children.list.map((d) => (
))}
); }, }); const rootStyles = css` .text { &::before { content: ""; position: absolute; top: 0; left: 4%; width: 92%; height: 100%; background-color: #333; transform: skewX(345deg); z-index: -1; } } `;