v-notion-editor 0.0.1

package/README.md

@@ -0,0 +1,371 @@
+# Vue Notion Editor
+
+A powerful, feature-rich Vue 3 rich text editor component inspired by Notion, It delivers a complete editing experience with slash commands, context menus, drag-and-drop support, advanced formatting, enhanced tables, and image upload capabilities.
+
+## Features
+
+-  **Rich Text Formatting**: Bold, italic, underline, strikethrough, code, and color formatting
+-  **Advanced Block Types**: Headings, blockquotes, code blocks, lists, and task lists
+-  **Table Support**: Create, edit, and manipulate tables with advanced cell & row operations
+-  **Image Handling**: Drag-and-drop image uploads with customizable upload functions
+-  **Drag & Drop**: Reorder content blocks with visual drag handles
+-  **Slash Commands**: Quick content insertion with "/" command menu
+-  **Link Management**: Smart link insertion and editing with bubble menu
+-  **Text Alignment**: Left, center, right, and justify alignment options
+-  **Collaborative Ready**: Built with Yjs integration support for real-time collaboration
+-  **Bubble Menu**: Context-sensitive formatting toolbar
+-  **Undo/Redo**: Full history management with keyboard shortcuts
+-  **Task Lists**: Interactive checkboxes and task management
+-  **File Handler**: Smart paste handling for images and rich content
+-  **Customizable**: Flexible styling with CSS variables and custom themes
+-  **TypeScript Support**: Fully typed for enhanced developer experience
+
+## Demo
+
+[Live Demo](https://notes.builto.com)
+
+## Installation
+
+```bash
+# npm
+npm install v-notion-editor
+
+# yarn
+yarn add v-notion-editor
+
+# pnpm
+pnpm add v-notion-editor
+```
+
+## Basic Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { NotesEditor, NotesToolbar } from 'v-notion-editor'
+import 'v-notion-editor/style.css'
+
+const content = ref('<p>Start writing your content here...</p>')
+
+const handleImageUpload = async (files) => {
+   // Implement your image upload logic
+   const fileToBase64 = (file) => {
+      return new Promise((resolve, reject) => {
+         const reader = new FileReader()
+         reader.onload = () => resolve(reader.result)
+         reader.onerror = reject
+         reader.readAsDataURL(file)
+      })
+   }
+
+   return await Promise.all(files.map(fileToBase64))
+}
+</script>
+
+<template>
+   <div>
+      <NotesToolbar />
+      <NotesEditor
+         v-model="content"
+         :image-upload-options="{
+            onUpload: handleImageUpload,
+            maxFileSize: 10 * 1024 * 1024, // 10MB
+            quality: 0.85,
+         }" />
+   </div>
+</template>
+```
+
+## 📁 Importing Styles
+
+You must import the CSS styles:
+
+```ts
+import 'v-notion-editor/style.css'
+```
+
+## Components
+
+### NotesEditor
+
+The main editor component that provides the rich text editing interface.
+
+#### Props
+
+| Prop                 | Type                 | Default | Description                             |
+| -------------------- | -------------------- | ------- | --------------------------------------- |
+| `modelValue`         | `string`             | `''`    | The HTML content of the editor          |
+| `imageUploadOptions` | `ImageUploadOptions` | `{}`    | Configuration for image upload handling |
+
+#### Events
+
+| Event               | Parameters      | Description                     |
+| ------------------- | --------------- | ------------------------------- |
+| `update:modelValue` | `value: string` | Emitted when content changes    |
+| `onFocus`           | -               | Emitted when editor gains focus |
+| `onBlur`            | -               | Emitted when editor loses focus |
+
+#### Image Upload Options
+
+```typescript
+interface ImageUploadOptions {
+   onUpload?: (files: File[]) => Promise<string[]>
+   maxFileSize?: number // in bytes, default: 10MB
+   quality?: number // 0-1, default: 0.85
+   allowedTypes?: string[] // default: ['image/png', 'image/jpeg', 'image/gif', 'image/webp']
+   onOpenFileDialog?: (multiple: boolean) => Promise<string[] | File[]> // custom file picker
+}
+```
+
+### NotesToolbar
+
+A comprehensive toolbar component with formatting options.
+
+#### Props
+
+| Prop              | Type       | Default   | Description                       |
+| ----------------- | ---------- | --------- | --------------------------------- |
+| `visibleToolbars` | `string[]` | All tools | Array of toolbar items to display |
+
+#### Available Toolbar Items
+
+`headings`, `bold`, `italic`, `underline`, `strike`, `code`, `color`, `link`, `bulletList`, `orderedList`, `taskList`, `blockquote`, `table`, `align`, `image`, `divider`, `undo`, `redo`
+
+## Usage Examples
+
+### 1. Custom Toolbar Configuration
+
+```vue
+<script setup>
+import { NotesEditor, NotesToolbar } from 'v-notion-editor'
+
+const customToolbars = ['headings', 'bold', 'italic', 'bulletList', 'orderedList', 'link', 'image']
+</script>
+
+<template>
+   <div>
+      <NotesToolbar :visible-toolbars="customToolbars" />
+      <NotesEditor v-model="content" />
+   </div>
+</template>
+```
+
+### 2. Editor Instance Access
+
+```vue
+<script setup>
+import { ref, onMounted } from 'vue'
+import { NotesEditor } from 'v-notion-editor'
+
+const editorRef = ref(null)
+
+const insertCustomContent = () => {
+   const editor = editorRef.value?.editor
+   if (editor) {
+      editor.chain().focus().insertContent('<p>Custom inserted content!</p>').run()
+   }
+}
+
+const getEditorContent = () => {
+   const editor = editorRef.value?.editor
+   if (editor) {
+      console.log('HTML:', editor.getHTML())
+      console.log('JSON:', editor.getJSON())
+      console.log('Text:', editor.getText())
+   }
+}
+</script>
+
+<template>
+   <div>
+      <button @click="insertCustomContent">Insert Content</button>
+      <button @click="getEditorContent">Get Content</button>
+
+      <NotesEditor ref="editorRef" v-model="content" />
+   </div>
+</template>
+```
+
+### 3. Read-Only Content Display
+
+To display editor content with the same styling in read-only mode, wrap your content with the `v-notion-editor` class:
+
+```vue
+<script setup>
+import 'v-notion-editor/style.css'
+
+const savedContent = ref(`
+  <h1>My Document Title</h1>
+  <p>This content will have the same styling as in the editor.</p>
+  <blockquote>Important note with proper formatting</blockquote>
+`)
+</script>
+
+<template>
+   <!-- Read-only content with editor styling -->
+   <div class="v-notion-editor">
+      <div v-html="savedContent" class="read-mode" />
+   </div>
+</template>
+```
+
+## Keyboard Shortcuts
+
+| Shortcut               | Action             |
+| ---------------------- | ------------------ |
+| `Ctrl/Cmd + B`         | Bold               |
+| `Ctrl/Cmd + I`         | Italic             |
+| `Ctrl/Cmd + U`         | Underline          |
+| `Ctrl/Cmd + Shift + S` | Strikethrough      |
+| `Ctrl/Cmd + E`         | Code               |
+| `Ctrl/Cmd + K`         | Link               |
+| `Ctrl/Cmd + Z`         | Undo               |
+| `Ctrl/Cmd + Shift + Z` | Redo               |
+| `Ctrl/Cmd + Shift + L` | Bullet List        |
+| `Ctrl/Cmd + Shift + O` | Ordered List       |
+| `Ctrl/Cmd + Enter`     | Hard Break         |
+| `/`                    | Slash command menu |
+
+## Slash Commands
+
+Type `/` to access quick content insertion:
+
+## Styling
+
+Customize the editor appearance using CSS variables:
+
+```css
+:root {
+   /* Editor Base */
+   --editor-bg: #ffffff;
+   --editor-color: #000000;
+   --editor-primary: #dbeafe;
+   --editor-primary-fg: #1d4ed8;
+
+   --editor-secondary: #f7f6f4;
+   --editor-secondary-dark: #c2c2bd;
+   --editor-border-color: #ececea;
+   --editor-btn-size: 1.7em;
+   --editor-btn-icon-size: calc(var(--editor-btn-size) - 0.7em);
+   --editor-border-radius: 0.5rem;
+   --editor-shadow: 0 4px 80px -4px rgba(0, 0, 0, 0.088);
+   --spacing-btn-size: var(--editor-btn-size);
+   --radius: var(--editor-border-radius);
+
+   /* Content Colors */
+   --editor-content-color-default: #37352f;
+   --editor-content-color-gray: #989898;
+   --editor-content-color-orange: #ea580c;
+   --editor-content-color-yellow: #ecb802;
+   --editor-content-color-green: #16a34a;
+   --editor-content-color-blue: #2563eb;
+   --editor-content-color-purple: #9333ea;
+   --editor-content-color-pink: #f64f9f;
+   --editor-content-color-red: #e0383e;
+   --editor-content-color-white: #ffffff;
+   --editor-content-color-heading: #292929;
+   --editor-content-color-text: #37352f;
+   --editor-content-color-text-secondary: #4f4f4f;
+   --editor-content-color-code: #e3342f;
+   --editor-content-color-code-block: #272727;
+   --editor-content-color-mark: #151413;
+   --editor-content-color-primary: #007bff;
+   --editor-content-color-primary-dark: #007bff;
+   --editor-content-color-primary-dark-light: #007bff;
+   --editor-content-color-border: #c8c8c6;
+   --editor-content-color-border-dark: #d0d0ce;
+
+   /* Content Background Colors */
+   --editor-content-bg-default: rgba(55, 53, 47, 0.12);
+   --editor-content-bg-gray: #d5d7d8;
+   --editor-content-bg-yellow: #ffebb4;
+   --editor-content-bg-yellow-light: #f3f1eb;
+   --editor-content-bg-green: #cbecbf;
+   --editor-content-bg-blue: #b4d6ff;
+   --editor-content-bg-purple: rgba(105, 64, 165, 0.4);
+   --editor-content-bg-pink: #fecbe2;
+   --editor-content-bg-red: #ff9898;
+   --editor-content-bg-black: #000000;
+   --editor-content-bg-secondary: #f7f6f4;
+   --editor-content-bg-mark: #fef08a;
+   --editor-content-bg-primary: #007bff;
+   --editor-content-bg-primary-dark: #0a77ec;
+   --editor-content-bg-primary-light: #eff5fd;
+   --editor-content-bg-primary-fg: #ffffff;
+
+   /* Headings */
+   --size-font-h1: 2.15em;
+   --size-font-h2: 1.65em;
+   --size-font-h3: 1.4em;
+   --size-font-h4: 1.35em;
+   --size-font-h5: 1.3em;
+   --size-font-h6: 1.125em;
+   --size-line-height-heading: 1.25;
+
+   /* Table */
+   --size-font-table: 1.1em;
+   --size-padding-table: 8px 12px;
+   --size-padding-table-cell: 0.5em 0.75em;
+   --size-table-cell-min-width: 100px;
+   --z-index-selected-cell: 2;
+
+   /* Code */
+   --size-font-code: 0.875em;
+
+   /* Fonts */
+   --font-family-base: 'Roboto', Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
+   --font-weight-medium: 500;
+   --font-weight-semibold: 600;
+   --font-weight-bold: 700;
+   --size-font-base: 15px;
+   --size-font-sm: 0.875em;
+   --size-font-xs: 0.75em;
+
+   /* Spacing / Padding / Margin  */
+   --size-spacing-sm: 0.25rem;
+   --size-spacing-md: 0.5rem;
+   --size-spacing-lg: 0.75rem;
+   --size-spacing-xl: 1rem;
+   --size-spacing-2xl: 1.5rem;
+   --size-spacing-3xl: 2rem;
+
+   --size-padding-sm: 0.125rem;
+   --size-padding-md: 0.375rem;
+   --size-padding-lg: 0.75rem;
+   --size-padding-xl: 1rem;
+
+   --size-margin-sm: 0.2em;
+   --size-margin-md: 0.58em;
+   --size-margin-lg: 0.88em;
+   --size-margin-xl: 1.18em;
+   --size-margin-2xl: 1.45em;
+
+   /* Borders  */
+   --size-border-radius-sm: 0.25rem;
+   --size-border-radius-md: 0.375rem;
+   --size-border-radius-lg: 0.5rem;
+   --size-border-radius-xl: 1px;
+   --size-border-width-sm: 0.95px;
+   --size-border-width-md: 2px;
+   --size-border-width-lg: 3px;
+
+   /* Line Heights */
+   --size-line-height-base: 1.6;
+   --size-line-height-list: 1.6;
+   --size-line-height-list-marker: 1.4;
+
+   /* Misc Sizes */
+   --size-cursor-width: 20px;
+   --size-resize-handle: 4px;
+   --size-drag-handle-width: 1.03rem;
+   --size-drag-handle-height: 1.4rem;
+}
+```
+
+## License
+
+MIT
+
+## Author
+
+[safdar-azeem](https://github.com/safdar-azeem)

package/components/Button.vue.d.ts

@@ -0,0 +1,119 @@
+import { PropType } from 'vue';
+
+export type ButtonVariant = 'primary' | 'transparent';
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    variant: {
+        type: PropType<ButtonVariant>;
+        default: string;
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: string;
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: PropType<"button" | "submit" | "reset">;
+        default: string;
+    };
+    icon: {
+        type: StringConstructor;
+        default: any;
+    };
+    rounded: {
+        type: PropType<"none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full">;
+        default: string;
+    };
+    iconRight: {
+        type: StringConstructor;
+        default: any;
+    };
+    iconSize: {
+        type: StringConstructor;
+    };
+    tabindex: {
+        type: NumberConstructor;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    variant: {
+        type: PropType<ButtonVariant>;
+        default: string;
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: string;
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: PropType<"button" | "submit" | "reset">;
+        default: string;
+    };
+    icon: {
+        type: StringConstructor;
+        default: any;
+    };
+    rounded: {
+        type: PropType<"none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full">;
+        default: string;
+    };
+    iconRight: {
+        type: StringConstructor;
+        default: any;
+    };
+    iconSize: {
+        type: StringConstructor;
+    };
+    tabindex: {
+        type: NumberConstructor;
+    };
+}>> & Readonly<{}>, {
+    type: "button" | "reset" | "submit";
+    disabled: boolean;
+    icon: string;
+    text: string;
+    className: string;
+    variant: ButtonVariant;
+    tooltip: string;
+    loading: boolean;
+    rounded: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+    iconRight: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/Dropdown.vue.d.ts

@@ -0,0 +1,72 @@
+import { IDropdownOptions, IPlacement } from '../types';
+
+declare function __VLS_template(): {
+    trigger?(_: {
+        selectedLabel: string;
+        isOpen: boolean;
+    }): any;
+    default?(_: {}): any;
+    menu?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    selected?: string | number;
+    className?: string;
+    emptyMessage?: string;
+    position?: IPlacement;
+    caret?: boolean;
+    selectedIndex?: number | null;
+    options?: IDropdownOptions;
+    triggerVariant?: any;
+    offset?: [number, number];
+}>, {
+    position: string;
+    emptyMessage: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    onSelect: (...args: any[]) => void;
+    onOpen: (...args: any[]) => void;
+    onClose: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    selected?: string | number;
+    className?: string;
+    emptyMessage?: string;
+    position?: IPlacement;
+    caret?: boolean;
+    selectedIndex?: number | null;
+    options?: IDropdownOptions;
+    triggerVariant?: any;
+    offset?: [number, number];
+}>, {
+    position: string;
+    emptyMessage: string;
+}>>> & Readonly<{
+    onOnSelect?: (...args: any[]) => any;
+    onOnOpen?: (...args: any[]) => any;
+    onOnClose?: (...args: any[]) => any;
+}>, {
+    emptyMessage: string;
+    position: IPlacement;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/DropdownMenu.vue.d.ts

@@ -0,0 +1,69 @@
+import { IDropdownOption, IDropdownOptions } from '../types';
+
+declare function __VLS_template(): {
+    menu?(_: {}): any;
+    option?(_: {
+        option: IDropdownOption;
+        index: number;
+        selectedIndex: number;
+    }): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    options?: IDropdownOptions;
+    emptyMessage?: string;
+    className?: string;
+    closeOnSelect?: boolean;
+    hasSearch?: boolean;
+    selectedIndex?: number | null;
+    selected?: string | number;
+}>, {
+    selectedIndex: any;
+    emptyMessage: string;
+    closeOnSelect: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    onSelect: (...args: any[]) => void;
+    onNavigate: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    options?: IDropdownOptions;
+    emptyMessage?: string;
+    className?: string;
+    closeOnSelect?: boolean;
+    hasSearch?: boolean;
+    selectedIndex?: number | null;
+    selected?: string | number;
+}>, {
+    selectedIndex: any;
+    emptyMessage: string;
+    closeOnSelect: boolean;
+}>>> & Readonly<{
+    onOnSelect?: (...args: any[]) => any;
+    onOnNavigate?: (...args: any[]) => any;
+}>, {
+    emptyMessage: string;
+    closeOnSelect: boolean;
+    selectedIndex: number | null;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/Icon.vue.d.ts

@@ -0,0 +1,19 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    icon: string;
+    width?: string;
+    height?: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    icon: string;
+    width?: string;
+    height?: string;
+}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/components/NotesEditor.vue.d.ts

@@ -0,0 +1,33 @@
+import { ImageUploadOptions } from '../composables/useNotesImageUpload';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    modelValue: string;
+    editClass?: string;
+    scrollClass?: string;
+    imageUploadOptions?: ImageUploadOptions;
+}>>, {
+    editor: import('vue').ShallowRef<import('@tiptap/vue-3').Editor, import('@tiptap/vue-3').Editor>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    onFocus: () => void;
+    onBlur: () => void;
+    "update:modelValue": (value: string) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    modelValue: string;
+    editClass?: string;
+    scrollClass?: string;
+    imageUploadOptions?: ImageUploadOptions;
+}>>> & Readonly<{
+    onOnFocus?: () => any;
+    onOnBlur?: () => any;
+    "onUpdate:modelValue"?: (value: string) => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};