تايب سكريبت - كيف يمكنني التعامل مع فتحات Vue بشكل صحيح في Storybook

أحاول جعل فواصل Vue تعمل في Storybook. أنا حالياً على إصدار بيتا من Storybook v7، لأنه كانت هناك تغييرات جعلتها أفضل لمشروعنا. نستخدم Vue 3 مع vite. كما أننا نستخدم Typescript في كل مكان.

المشكلة هي أن Storybook لا يبدو أنه يوفر طريقة سهلة لإضافة محتوى القسم (slot). الطريقة الوحيدة هي من خلال كائن args، وحتى في تلك الحالة تحتاج إلى شيء مثل هذا لجعله يعمل بشكل صحيح:

const meta: Meta<typeof Modal> = {
    title: 'Componenten/Modal',
    component: Modal,
    render: (args: any) => ({
        components: { Modal },
        setup() {
            return { args };
        },
        template:
            '<Modal v-bind="args">' +
            '<template v-if="args.data" v-slot:data>' +
            '<div v-html="args.data" />' +
            '</template>' +
            '</Modal>',
    }),
};

export default meta;

type Story = StoryObj<typeof Modal>;

export const Modal: Story = {
    args: {
        title: 'Are you sure?',
        show: true,
        actions: [
            {
                buttonType: ButtonType.Remove,
                label: 'Yes, remove',
                link: () => {},
            },
            {
                label: 'Cancel',
                link: () => {},
            },
        ],
        data: "<a href={'/test'}>Hello world</a>",
    },
};

أعتقد أن هذا قبيح ويجب أن يكون هناك خيار أسهل، لكن لست متأكدًا من وجود بديل؟

أيضًا، أسماء الفتحات غير موجودة في أنواع كائن args، لذا مع هذا الكود، يعطي TypeScript خطأ TS2322 يشير إلى أن اسم الفتحة ليس خاصية في args. هذا يمكن أن يعمل باستخدام any، لكن هذا شيء أفضل أن لا أفعله.

هل يعرف أحد حلاً أفضل لهذا؟