Refactor #957 - Improve TypeScript definitions

src/components/accordion/Accordion.d.ts

@@ -1,8 +1,11 @@
-import Vue, { VNode } from 'vue';
+import { VNode } from 'vue';
 
-declare class Accordion extends Vue {
+interface AccordionProps {
     multiple?: boolean;
     activeIndex?: Number|[Number];
+}
+declare class Accordion {
+    $props: AccordionProps;
     $emit(eventName: 'tab-open', e: {originalEvent: Event, tab: any}): this;
     $emit(eventName: 'tab-close', e: {originalEvent: Event, tab: any}): this;
     $slots: {
@@ -10,4 +13,4 @@ declare class Accordion extends Vue {
     }
 }
 
-export default Accordion;
+export default Accordion;

src/components/accordiontab/AccordionTab.d.ts

@@ -1,13 +1,17 @@
-import Vue, { VNode } from 'vue';
+import { VNode } from 'vue';
 
-declare class AccordionTab extends Vue {
+interface AccordionTabProps {
     header?: string;
     active?: boolean;
     disabled?: boolean;
+}
+
+declare class AccordionTab {
+    $props: AccordionTabProps;
     $slot: {
         '': VNode[];
         header: VNode[];
     }
 }
 
-export default AccordionTab;
+export default AccordionTab;

src/components/autocomplete/AutoComplete.d.ts

@@ -1,6 +1,6 @@
-import Vue, { VNode } from 'vue';
+import { VNode } from 'vue';
 
-declare class AutoComplete extends Vue {
+interface AutoCompleteProps {
     modelValue?: any;
     suggestions?: any[];
     field?: string|Function;
@@ -14,6 +14,10 @@ declare class AutoComplete extends Vue {
     inputStyle?: any;
     inputClass?: string;
     forceSelection?: boolean;
+}
+
+declare class AutoComplete {
+    $props: AutoCompleteProps;
     $emit(eventName: 'item-select', e: {originalEvent: Event, value: any}): this;
     $emit(eventName: 'item-unselect', e: {originalEvent: Event, value: any}): this;
     $emit(eventName: 'dropdown-click', e: {originalEvent: Event, query: string}): this;
@@ -24,4 +28,4 @@ declare class AutoComplete extends Vue {
     };
 }
 
-export default AutoComplete;
+export default AutoComplete;

src/components/avatar/Avatar.d.ts

@@ -1,9 +1,11 @@
-import Vue from 'vue';
-
-declare class Avatar extends Vue {
+interface AvatarProps {
     label?: string;
     icon?: string;
     image?: string;
 }
 
-export default Avatar;
+declare class Avatar {
+    $props: AvatarProps
+}
+
+export default Avatar;

src/components/avatargroup/AvatarGroup.d.ts

@@ -1,5 +1,7 @@
-import Vue from 'vue';
+interface AvatarGroupProps {}
 
-declare class AvatarGroup extends Vue {}
+declare class AvatarGroup {
+    $props: AvatarGroupProps;
+}
 
-export default AvatarGroup;
+export default AvatarGroup;

src/components/badge/Badge.d.ts

@@ -1,9 +1,11 @@
-import Vue from 'vue';
-
-declare class Badge extends Vue {
+interface BadgeProps {
     value?: any;
     severity?: string;
     size?: string;
 }
 
-export default Badge;
+declare class Badge {
+    $props: BadgeProps;
+}
+
+export default Badge;

src/components/badgedirective/BadgeDirective.d.ts

@@ -1,5 +1,5 @@
-import Directive from 'vue';
+import { ObjectDirective } from 'vue';
 
-declare interface BadgeDirective extends Directive {}
+declare const BadgeDirective: ObjectDirective;
 
-export default BadgeDirective;
+export default BadgeDirective;

src/components/blockui/BlockUI.d.ts

@@ -1,10 +1,14 @@
-import Vue, { VNode } from 'vue';
+import { VNode } from 'vue';
 
-declare class BlockUI extends Vue {
+interface BlockUIProps {
     blocked?: boolean;
     fullScreen?: boolean;
     baseZIndex?: number;
     autoZIndex?: boolean;
+}
+
+declare class BlockUI {
+    $props: BlockUIProps;
     $emit(eventName: 'block'): this;
     $emit(eventName: 'unblock'): this;
     $slots: {
@@ -12,4 +16,4 @@ declare class BlockUI extends Vue {
     }
 }
 
-export default BlockUI;
+export default BlockUI;

src/components/breadcrumb/Breadcrumb.d.ts

@@ -1,8 +1,10 @@
-import Vue from 'vue';
-
-declare class Breadcrumb extends Vue {
+interface BreadcrumbProps {
     home?: any;
     model?: any[];
 }
 
-export default Breadcrumb;
+declare class Breadcrumb {
+    $props: BreadcrumbProps;
+}
+
+export default Breadcrumb;

src/components/button/Button.d.ts

@@ -1,6 +1,4 @@
-import Vue from 'vue';
-
-declare class Button extends Vue {
+interface ButtonProps {
     label?: string;
     icon?: string;
     iconPos?: string;
@@ -8,4 +6,8 @@ declare class Button extends Vue {
     badgeClass?: string;
 }
 
-export default Button;
+declare class Button {
+    $props: ButtonProps;
+}
+
+export default Button;

src/components/calendar/Calendar.d.ts

@@ -1,6 +1,6 @@
-import Vue, { VNode } from 'vue';
+import { VNode } from 'vue';
 
-declare class Calendar extends Vue {
+interface CalendarProps {
     modelValue?: Date | Date[];
     selectionMode?: string;
     dateFormat?: string;
@@ -41,6 +41,10 @@ declare class Calendar extends Vue {
     appendTo?: string;
     inputStyle?: any;
     inputClass?: string;
+}
+
+declare class Calendar {
+    $props: CalendarProps;
     $emit(eventName: 'show'): this;
     $emit(eventName: 'hide'): this;
     $emit(eventName: 'month-change', e: { month: number, year: number }): this;
@@ -55,4 +59,4 @@ declare class Calendar extends Vue {
     };
 }
 
-export default Calendar;
+export default Calendar;

src/components/card/Card.d.ts

@@ -1,6 +1,9 @@
-import Vue, { VNode } from 'vue';
+import { VNode } from 'vue';
 
-declare class Card extends Vue {
+interface CardProps {}
+
+declare class Card {
+    $props: CardProps;
     $slots: {
         header: VNode[];
         title: VNode[];
@@ -10,4 +13,4 @@ declare class Card extends Vue {
     }
 }
 
-export default Card;
+export default Card;

src/components/carousel/Carousel.d.ts

@@ -1,7 +1,7 @@
-import Vue, {VNode} from 'vue';
+import { VNode } from 'vue';
 
-declare class Carousel extends Vue {
-	value?: any;
+interface CarouselProps {
+    value?: any;
 	page?: number;
 	numVisible?: number;
 	numScroll?: number;
@@ -13,6 +13,10 @@ declare class Carousel extends Vue {
 	contentClass?: string;
 	circular?: boolean;
 	autoplayInterval?: number;
+}
+
+declare class Carousel {
+	$props: CarouselProps;
 	$slots: {
 		item: VNode[];
 		header: VNode[];
@@ -20,4 +24,4 @@ declare class Carousel extends Vue {
 	}
 }
 
-export default Carousel;
+export default Carousel;

src/components/cascadeselect/CascadeSelect.d.ts

@@ -1,6 +1,6 @@
-import Vue, { VNode } from 'vue';
+import { VNode } from 'vue';
 
-declare class CascadeSelect extends Vue {
+interface CascadeSelectProps {
     modelValue?: any;
     options?: any[];
     optionLabel?: string;
@@ -14,6 +14,10 @@ declare class CascadeSelect extends Vue {
     inputId?: string;
     ariaLabelledBy?: string;
     appendTo?: string;
+}
+
+declare class CascadeSelect {
+    $props: CascadeSelectProps;
     $emit(eventName: 'update:modelValue', value: string): this;
     $emit(eventName: 'change', e: { originalEvent: Event, value: any }): this;
     $emit(eventName: 'change-group', e: { originalEvent: Event, value: any }): this;
@@ -26,4 +30,4 @@ declare class CascadeSelect extends Vue {
     }
 }
 
-export default CascadeSelect;
+export default CascadeSelect;

src/components/chart/Chart.d.ts

@@ -1,15 +1,17 @@
-import Vue from 'vue';
-
-declare class Chart extends Vue {
+interface ChartProps {
     type?: string;
     data?: object;
     options?: object;
     width?: number;
     height?: number;
+}
+
+declare class Chart {
+    $props: ChartProps;
     $emit(eventName: 'select', e: { originalEvent: Event, element: any, dataset: any }): this;
     refresh(): void;
     reinit(): void;
     generateLegend(): void | any;
 }
 
-export default Chart;
+export default Chart;

src/components/checkbox/Checkbox.d.ts

@@ -1,10 +1,12 @@
-import Vue from 'vue';
-
-declare class Checkbox extends Vue {
+interface CheckboxProps {
     value?: null;
     modelValue?: null;
     binary?: boolean;
+}
+
+declare class Checkbox {
+    $props: CheckboxProps;
     $emit(eventName: string, event: Event): this;
 }
 
-export default Checkbox;
+export default Checkbox;

src/components/chip/Chip.d.ts

@@ -1,6 +1,4 @@
-import Vue from 'vue';
-
-declare class Chip extends Vue {
+interface ChipProps {
     label?: string;
     icon?: string;
     image?: string;
@@ -8,4 +6,8 @@ declare class Chip extends Vue {
     removeIcon?: string;
 }
 
-export default Chip;
+declare class Chip {
+    $props: ChipProps;
+}
+
+export default Chip;

src/components/chips/Chips.d.ts

@@ -1,11 +1,15 @@
-import Vue, { VNode } from 'vue';
+import { VNode } from 'vue';
 
-declare class Chips extends Vue {
+interface ChipsProps {
     modelValue?: any[];
     max?: number;
     addOnBlur?: boolean;
     allowDuplicate?: boolean;
     separator?: string;
+}
+
+declare class Chips {
+    $props: ChipsProps;
     $emit(eventName: 'add', e: { originalEvent: Event, value: any }): this;
     $emit(eventName: 'remove', e: { originalEvent: Event, value: any }): this;
     $slots: {
@@ -13,4 +17,4 @@ declare class Chips extends Vue {
     }
 }
 
-export default Chips;
+export default Chips;

src/components/colorpicker/ColorPicker.d.ts

@@ -1,6 +1,4 @@
-import Vue, { VNode } from 'vue';
-
-declare class ColorPicker extends Vue {
+interface ColorPickerProps {
     modelValue?: any;
     defaultColor?: any;
     inline?: boolean;
@@ -10,7 +8,11 @@ declare class ColorPicker extends Vue {
     autoZIndex?: boolean;
     baseZIndex?: number;
     ariaLabelledBy?: string;
+}
+
+declare class ColorPicker {
+    $props: ColorPickerProps;
     $emit(eventName: 'input', value: any): this;
 }
 
-export default ColorPicker;
+export default ColorPicker;

src/components/column/Column.d.ts

@@ -1,6 +1,4 @@
-import Vue from 'vue';
-
-declare class Column extends Vue {
+interface ColumnProps {
     columnKey?: any;
     field?: string;
     sortField?: string | ((item: any) => any);
@@ -32,4 +30,8 @@ declare class Column extends Vue {
     exportable?: boolean;
 }
 
+declare class Column {
+    $props: ColumnProps;
+}
+
 export default Column;

src/components/columngroup/ColumnGroup.d.ts

@@ -1,7 +1,9 @@
-import Vue from 'vue';
-
-declare class ColumnGroup extends Vue {
+interface ColumnGroupProps {
     type?: string;
 }
 
-export default ColumnGroup;
+declare class ColumnGroup {
+    $props: ColumnGroupProps;
+}
+
+export default ColumnGroup;

src/components/confirmdialog/ConfirmDialog.d.ts

@@ -1,7 +1,9 @@
-import Vue from 'vue';
-
-declare class ConfirmDialog extends Vue {
+interface ConfirmDialogProps {
     group?: string;
 }
 
-export default ConfirmDialog;
+declare class ConfirmDialog {
+    $props: ConfirmDialogProps;
+}
+
+export default ConfirmDialog;

src/components/confirmpopup/ConfirmPopup.d.ts

@@ -1,7 +1,9 @@
-import Vue from 'vue';
-
-declare class ConfirmPopup extends Vue {
+interface ConfirmPopupProps {
     group?: string;
 }
 
-export default ConfirmPopup;
+declare class ConfirmPopup {
+    $props: ConfirmPopupProps;
+}
+
+export default ConfirmPopup;

src/components/contextmenu/ContextMenu.d.ts

@@ -1,14 +1,16 @@
-import Vue from 'vue';
-
-declare class ContextMenu extends Vue {
+interface ContextMenuProps {
     model?: any[];
     appendTo?: string;
     autoZIndex?: boolean;
     baseZIndex?: number;
     global?: boolean;
+}
+
+declare class ContextMenu {
+    $props: ContextMenuProps;
     toggle(event: Event): void;
     show(event: Event, target?: any): void;
     hide(): void;
 }
 
-export default ContextMenu;
+export default ContextMenu;

src/components/datatable/DataTable.d.ts

@@ -1,6 +1,6 @@
-import Vue, {VNode} from 'vue';
+import { VNode } from 'vue';
 
-declare class DataTable extends Vue {
+interface DataTableProps {
     value?: any[];
     dataKey?: string;
     rows?: number;
@@ -58,6 +58,10 @@ declare class DataTable extends Vue {
     virtualScroll?: boolean;
     virtualRowHeight?: string;
     virtualScrollDelay?: number;
+}
+
+declare class DataTable {
+    $props: DataTableProps;
 
     $emit(eventName: 'page', event: Event): this;
     $emit(eventName: 'sort', event: Event): this;

src/components/dataview/DataView.d.ts

@@ -1,6 +1,6 @@
-import Vue, { VNode } from 'vue';
+import { VNode } from 'vue';
 
-declare class DataView extends Vue {
+interface DataViewProps {
     value?: any[];
     layout?: string;
     rows?: number;
@@ -16,6 +16,10 @@ declare class DataView extends Vue {
     sortField?: string | ((item: any) => any);
     sortOrder?: number;
     lazy?: boolean;
+}
+
+declare class DataView {
+    $props: DataViewProps;
     $emit(eventName: 'page', event: Event): this;
     $slots: {
         header: VNode[];
@@ -27,4 +31,4 @@ declare class DataView extends Vue {
     }
 }
 
-export default DataView;
+export default DataView;

src/components/dataviewlayoutoptions/DataViewLayoutOptions.d.ts

@@ -1,8 +1,10 @@
-import Vue from 'vue';
-
-declare class DataViewLayoutOptions extends Vue {
+interface DataViewLayoutOptionsProps {
     value?: string;
+}
+
+declare class DataViewLayoutOptions {
+    $props: DataViewLayoutOptionsProps;
     $emit(eventName: 'input', layout: string): this;
 }
 
-export default DataViewLayoutOptions;
+export default DataViewLayoutOptions;

src/components/deferredcontent/DeferredContent.d.ts

@@ -1,10 +1,13 @@
-import Vue, {VNode} from 'vue';
+import { VNode } from 'vue';
 
-declare class DeferredContent extends Vue {
+interface DeferredContentProps {}
+
+declare class DeferredContent {
+    $props: DeferredContentProps;
     $emit(eventName: 'load'): this;
     $slots: {
         '': VNode[];
     }
 }
 
-export default DeferredContent;
+export default DeferredContent;

src/components/dialog/Dialog.d.ts

@@ -1,6 +1,6 @@
-import Vue, {VNode} from 'vue';
+import { VNode } from 'vue';
 
-declare class Dialog extends Vue {
+interface DialogProps {
     header?: any;
     footer?: any;
     visible?: boolean;
@@ -16,6 +16,10 @@ declare class Dialog extends Vue {
     ariaCloseLabel?: string;
     position?: string;
     maximizable?: boolean;
+}
+
+declare class Dialog {
+    $props: DialogProps;
     $emit(eventName: 'show'): this;
     $emit(eventName: 'hide'): this;
     $slots: {
@@ -25,4 +29,4 @@ declare class Dialog extends Vue {
     }
 }
 
-export default Dialog;
+export default Dialog;

src/components/divider/Divider.d.ts

@@ -1,9 +1,11 @@
-import Vue from 'vue';
-
-declare class Divider extends Vue {
+interface DividerProps {
     align?: string;
     layout?: string;
     type?: string;
 }
 
-export default Divider;
+declare class Divider {
+    $props: DividerProps;
+}
+
+export default Divider;

src/components/dropdown/Dropdown.d.ts

@@ -1,6 +1,6 @@
-import Vue, { VNode } from 'vue';
+import { VNode } from 'vue';
 
-declare class Dropdown extends Vue {
+interface DropdownProps {
     modelValue?: any;
     options?: any[];
     optionLabel?: string;
@@ -20,6 +20,10 @@ declare class Dropdown extends Vue {
     ariaLabelledBy?: string;
     appendTo?: string;
     emptyFilterMessage?: string;
+}
+
+declare class Dropdown {
+    $props: DropdownProps;
     $emit(eventName: 'input', value: string): this;
     $emit(eventName: 'change', e: { originalEvent: Event, value: string }): this;
     $emit(eventName: 'before-show'): this;
@@ -32,4 +36,4 @@ declare class Dropdown extends Vue {
     }
 }
 
-export default Dropdown;
+export default Dropdown;

src/components/editor/Editor.d.ts

@@ -1,11 +1,15 @@
-import Vue, { VNode } from 'vue';
+import { VNode } from 'vue';
 
-declare class Editor extends Vue {
+interface EditorProps {
     modelValue?: string;
     placeholder?: string;
     readonly?: boolean;
     formats?: any[];
     editorStyle?: string;
+}
+
+declare class Editor {
+    $props: EditorProps;
     $emit(eventName: 'input', event: string): this;
     $emit(eventName: 'text-change', e: { htmlValue: string, textValue: any, delta: any, source: string}): this;
     $slot: {
@@ -13,4 +17,4 @@ declare class Editor extends Vue {
     }
 }
 
-export default Editor;
+export default Editor;

src/components/fieldset/Fieldset.d.ts

@@ -1,14 +1,18 @@
-import Vue, { VNode } from 'vue';
+import { VNode } from 'vue';
 
-declare class Fieldset extends Vue {
+interface FieldsetProps {
     legend?: string;
     toggleable?: boolean;
     collapsed?: boolean;
+}
+
+declare class Fieldset {
+    $props: FieldsetProps;
     $emit(eventName: 'toggle', e: { originalEvent: Event, value: boolean }): this;
     $slots: {
         '': VNode[];
-        legend: VNode[];   
+        legend: VNode[];
     }
 }
 
-export default Fieldset;
+export default Fieldset;

src/components/fileupload/FileUpload.d.ts

@@ -1,6 +1,4 @@
-import Vue from 'vue';
-
-declare class FileUpload extends Vue {
+interface FileUploadProps {
     name?: string;
     url?: string;
     mode?: string;
@@ -20,6 +18,10 @@ declare class FileUpload extends Vue {
     customUpload?: boolean;
     showUploadButton?: boolean;
     showCancelButton?: boolean;
+}
+
+declare class FileUpload {
+    $props: FileUploadProps;
     $emit(eventName: 'select', e: { originalEvent: Event, files: any }): this;
     $emit(eventName: 'before-upload', e: { xhr: XMLHttpRequest, formData: any }): this;
     $emit(eventName: 'progress', e: { originalEvent: Event, progress: any }): this;
@@ -29,4 +31,4 @@ declare class FileUpload extends Vue {
     $emit(eventName: 'clear'): this;
 }
 
-export default FileUpload;
+export default FileUpload;

src/components/fullcalendar/FullCalendar.d.ts

@@ -1,8 +1,10 @@
-import Vue from 'vue';
-
-declare class FullCalendar extends Vue {
+interface FullCalendarProps {
     events?: any[];
     options?: object;
 }
 
-export default FullCalendar;
+declare class FullCalendar {
+    $props: FullCalendarProps;
+}
+
+export default FullCalendar;

src/components/galleria/Galleria.d.ts

@@ -1,6 +1,6 @@
-import Vue, {VNode} from 'vue';
+import { VNode } from 'vue';
 
-declare class Galleria extends Vue {
+interface GalleriaProps {
     id?: string;
     value?: any;
     activeIndex?: number;
@@ -25,6 +25,10 @@ declare class Galleria extends Vue {
     maskClass?: string;
     containerStyle?: string;
     containerClass?: string;
+}
+
+declare class Galleria {
+    $props: GalleriaProps;
 	$slots: {
 		header: VNode[];
         footer: VNode[];
@@ -35,4 +39,4 @@ declare class Galleria extends Vue {
 	}
 }
 
-export default Galleria;
+export default Galleria;

src/components/inlinemessage/InlineMessage.d.ts

@@ -1,10 +1,14 @@
-import Vue, { VNode } from 'vue';
+import { VNode } from 'vue';
 
-declare class InlineMessage extends Vue {
+interface InlineMessageProps {
     severity?: string;
+}
+
+declare class InlineMessage {
+    $props: InlineMessageProps;
     $slots: {
         '': VNode[];
     }
 }
 
-export default InlineMessage;
+export default InlineMessage;

src/components/inplace/Inplace.d.ts

@@ -1,12 +1,16 @@
-import Vue, {VNode} from 'vue';
+import { VNode } from 'vue';
 
-declare class Inplace extends Vue {
+interface InplaceProps {
     closable?: boolean;
     active?: boolean;
+}
+
+declare class Inplace {
+    $props: InplaceProps;
     $slots: {
         display: VNode[];
         content: VNode[];
     }
 }
 
-export default Inplace;
+export default Inplace;

src/components/inputmask/InputMask.d.ts

@@ -1,11 +1,13 @@
-import Vue, { VNode } from 'vue';
-
-declare class InputMask extends Vue {
+interface InputMaskProps {
     modelValue?: string;
     slotChar?: string;
     mask?: string;
     autoClear?: boolean;
     unmask?: boolean;
+}
+
+declare class InputMask {
+    $props: InputMaskProps;
     $emit(eventName: 'input', value: string): this;
     $emit(eventName: 'focus', event: Event): this;
     $emit(eventName: 'blur', event: Event): this;
@@ -15,4 +17,4 @@ declare class InputMask extends Vue {
     $emit(eventName: 'complete', event: Event): this;
 }
 
-export default InputMask;
+export default InputMask;

src/components/inputnumber/InputNumber.d.ts

@@ -1,6 +1,4 @@
-import Vue from 'vue';
-
-declare class InputNumber extends Vue {
+interface InputNumberProps {
     modelValue?: number;
     format?: boolean;
     showButtons?: boolean;
@@ -24,6 +22,10 @@ declare class InputNumber extends Vue {
     step?: number;
     inputStyle?: any;
     inputClass?: string;
+}
+
+declare class InputNumber {
+    $props: InputNumberProps;
     $emit(eventName: string, value: number | Event): this;
     $emit(eventName: 'input', e: {originalEvent: Event, value: any}): this;
 }

src/components/inputswitch/InputSwitch.d.ts

@@ -1,7 +1,9 @@
-import Vue from 'vue';
-
-declare class InputSwitch extends Vue {
+interface InputSwitchProps {
     modelValue?: boolean;
 }
 
-export default InputSwitch;
+declare class InputSwitch {
+    $props: InputSwitchProps;
+}
+
+export default InputSwitch;

src/components/inputtext/InputText.d.ts

@@ -1,8 +1,10 @@
-import Vue from 'vue';
-
-declare class InputText extends Vue {
+interface InputTextProps {
     value?: string;
+}
+
+declare class InputText {
+    $props: InputTextProps;
     $emit(eventName: 'input', value: string): this;
 }
 
-export default InputText;
+export default InputText;

src/components/knob/Knob.d.ts

@@ -1,6 +1,4 @@
-import Vue from 'vue';
-
-declare class Knob extends Vue {
+interface KnobProps {
     modelValue?: number;
     size?: number;
     disabled?: boolean;
@@ -14,7 +12,11 @@ declare class Knob extends Vue {
     strokeWidth?: number;
     showValue?: boolean;
     valueTemplate?: string;
+}
+
+declare class Knob {
+    $props: KnobProps;
     $emit(eventName: 'change', value: any): this;
 }
 
-export default Knob;
+export default Knob;

src/components/listbox/Listbox.d.ts

@@ -1,6 +1,6 @@
-import Vue, { VNode } from 'vue';
+import { VNode } from 'vue';
 
-declare class Listbox extends Vue {
+interface ListboxProps {
     modelValue?: any;
     options?: any[];
     optionLabel?: string;
@@ -16,6 +16,10 @@ declare class Listbox extends Vue {
     filterLocale?: string;
     ariaLabelledBy?: string;
     emptyFilterMessage?: string;
+}
+
+declare class Listbox {
+    $props: ListboxProps;
     $emit(eventName: 'input', value: any): this;
     $emit(eventName: 'change', e: { originalEvent: Event, value: any }): this;
     $emit(eventName: 'filter', e: { originalEvent: Event, value: string }): this;
@@ -24,4 +28,4 @@ declare class Listbox extends Vue {
     }
 }
 
-export default Listbox;
+export default Listbox;

src/components/megamenu/MegaMenu.d.ts

@@ -1,8 +1,10 @@
-import Vue from 'vue';
-
-declare class MegaMenu extends Vue {
+interface MegaMenuProps {
     model?: any[];
     orientation?: string;
 }
 
-export default MegaMenu;
+declare class MegaMenu {
+    $props: MegaMenuProps;
+}
+
+export default MegaMenu;

src/components/menu/Menu.d.ts

@@ -1,14 +1,16 @@
-import Vue from 'vue';
-
-declare class Menu extends Vue {
+interface MenuProps {
     popup?: boolean;
     model?: any[];
     appendTo?: string;
     autoZIndex?: boolean;
     baseZIndex?: number;
+}
+
+declare class Menu {
+    $props: MenuProps;
     toggle(event: Event): void;
     show(event: Event, target?: any): void;
     hide(): void;
 }
 
-export default Menu;
+export default Menu;

src/components/menubar/Menubar.d.ts

@@ -1,7 +1,9 @@
-import Vue from 'vue';
-
-declare class Menubar extends Vue {
+interface MenubarProps {
     model?: any[];
 }
 
-export default Menubar;
+declare class Menubar {
+    $props: MenubarProps;
+}
+
+export default Menubar;

src/components/message/Message.d.ts

@@ -1,13 +1,17 @@
-import Vue, { VNode } from 'vue';
+import { VNode } from 'vue';
 
-declare class Message extends Vue {
+interface MessageProps {
     severity?: string;
     closable?: boolean;
     sticky?: boolean;
     life?: number;
+}
+
+declare class Message {
+    $props: MessageProps;
     $slots: {
         '': VNode[];
     }
 }
 
-export default Message;
+export default Message;

src/components/multiselect/MultiSelect.d.ts

@@ -1,6 +1,6 @@
-import Vue, {VNode} from 'vue';
+import { VNode } from 'vue';
 
-declare class MultiSelect extends Vue {
+interface MultiSelectProps {
     modelValue?: any;
     options?: any[];
     optionLabel?: string;
@@ -19,6 +19,10 @@ declare class MultiSelect extends Vue {
     appendTo?: string;
     emptyFilterMessage?: string;
     display?: string;
+}
+
+declare class MultiSelect {
+    $props: MultiSelectProps;
     $emit(eventName: 'input', value: any): this;
     $emit(eventName: 'change', e: {originalEvent: Event, value: any}): this;
     $emit(eventName: 'before-show'): this;
@@ -32,4 +36,4 @@ declare class MultiSelect extends Vue {
     }
 }
 
-export default MultiSelect;
+export default MultiSelect;

src/components/orderlist/OrderList.d.ts

@@ -1,11 +1,15 @@
-import Vue, {VNode} from 'vue';
+import { VNode } from 'vue';
 
-declare class OrderList extends Vue {
+interface OrderListProps {
     modelValue?: any[];
     dataKey?: string;
     selection?: any[];
     metaKeySelection?: boolean;
     listStyle?: any;
+}
+
+declare class OrderList {
+    $props: OrderListProps;
     $emit(eventName: 'reorder', e: { originalEvent: Event, value: any[]; direction: string}): this;
     $slots: {
         header: VNode[];
@@ -13,4 +17,4 @@ declare class OrderList extends Vue {
     }
 }
 
-export default OrderList;
+export default OrderList;

src/components/organizationchart/OrganizationChart.d.ts

@@ -1,11 +1,15 @@
-import Vue, {VNode} from 'vue';
+import { VNode } from 'vue';
 
-declare class OrganizationChart extends Vue {
+interface OrganizationChartProps {
     value?: any;
     selectionKeys?: any;
     selectionMode?: string;
     collapsedKeys?: any;
     collapsible?: boolean;
+}
+
+declare class OrganizationChart {
+    $props: OrganizationChartProps;
     $emit(eventName: 'node-select', node: any): this;
     $emit(eventName: 'node-unselect', node: any): this;
     $emit(eventName: 'node-expand', node: any): this;
@@ -15,4 +19,4 @@ declare class OrganizationChart extends Vue {
     }
 }
 
-export default OrganizationChart;
+export default OrganizationChart;

src/components/overlaypanel/OverlayPanel.d.ts

@@ -1,12 +1,16 @@
-import Vue, { VNode } from 'vue';
+import { VNode } from 'vue';
 
-declare class OverlayPanel extends Vue {
+interface OverlayPanelProps {
     ismissable?: boolean;
     showCloseIcon?: boolean;
     appendTo?: string;
     baseZIndex?: number;
     autoZIndex?: boolean;
     ariaCloseLabel?: string;
+}
+
+declare class OverlayPanel {
+    $props: OverlayPanelProps;
     toggle(event: Event): void;
     show(event: Event, target?: any): void;
     hide(): void;
@@ -15,4 +19,4 @@ declare class OverlayPanel extends Vue {
     }
 }
 
-export default OverlayPanel;
+export default OverlayPanel;

src/components/paginator/Paginator.d.ts

@@ -1,4 +1,4 @@
-import Vue, { VNode } from 'vue';
+import { VNode } from 'vue';
 
 export interface PageState {
     first: number,
@@ -7,7 +7,7 @@ export interface PageState {
     pageCount: number
 }
 
-declare class Paginator extends Vue {
+interface PaginatorProps {
     totalRecords?: number;
     rows?: number;
     first?: number;
@@ -16,6 +16,10 @@ declare class Paginator extends Vue {
     template?: string;
     currentPageReportTemplate?: any;
     alwaysShow?: boolean;
+}
+
+declare class Paginator {
+    $props: PaginatorProps;
     $emit(eventName: 'page', event: PageState): this;
     $slots: {
         left: VNode[];
@@ -23,4 +27,4 @@ declare class Paginator extends Vue {
     }
 }
 
-export default Paginator;
+export default Paginator;

src/components/panel/Panel.d.ts

@@ -1,9 +1,13 @@
-import Vue, {VNode} from 'vue';
+import { VNode } from 'vue';
 
-declare class Panel extends Vue {
+interface PanelProps {
     header?: string;
     toggleable?: boolean;
     collapsed?: boolean;
+}
+
+declare class Panel {
+    $props: PanelProps;
     $emit(eventName: 'toggle', e: { originalEvent: Event, value: boolean; }): this;
     $slots: {
         '': VNode[];
@@ -11,4 +15,4 @@ declare class Panel extends Vue {
     }
 }
 
-export default Panel;
+export default Panel;

src/components/panelmenu/PanelMenu.d.ts

@@ -1,7 +1,9 @@
-import Vue from 'vue';
-
-declare class PanelMenu extends Vue {
+interface PanelMenuProps {
     model?: any[];
 }
 
-export default PanelMenu;
+declare class PanelMenu {
+    $props: PanelMenuProps;
+}
+
+export default PanelMenu;

src/components/password/Password.d.ts

@@ -1,6 +1,4 @@
-import Vue from 'vue';
-
-declare class Password extends Vue {
+interface PasswordProps {
     modelValue?: string;
     promptLabel?: string;
     mediumRegex?: string;
@@ -13,7 +11,11 @@ declare class Password extends Vue {
     toggleMask?: boolean;
     inputStyle?: any;
     inputClass?: string;
+}
+
+declare class Password {
+    $props: PasswordProps;
     $emit(eventName: string, event: Event): this;
 }
 
-export default Password;
+export default Password;

src/components/picklist/PickList.d.ts

@@ -1,11 +1,15 @@
-import Vue, {VNode} from 'vue';
+import { VNode } from 'vue';
 
-declare class PickList extends Vue {
+interface PickListProps {
     modelValue?: any[][];
     selection?: any[][];
     dataKey?: string;
     metaKeySelection?: boolean;
     listStyle?: any;
+}
+
+declare class PickList {
+    $props: PickListProps;
     $emit(eventName: 'reorder', e: { originalEvent: Event, value: any[]; direction: string}): this;
     $emit(eventName: 'move-to-target', e: { originalEvent: Event, items: [] }): this;
     $emit(eventName: 'move-all-to-target', e: { originalEvent: Event, items: [] }): this;
@@ -17,4 +21,4 @@ declare class PickList extends Vue {
     }
 }
 
-export default PickList;
+export default PickList;

src/components/progressbar/ProgressBar.d.ts

@@ -1,9 +1,11 @@
-import Vue from 'vue';
-
-declare class ProgressBar extends Vue {
+interface ProgressBarProps {
     value?: number;
     mode?: string;
     showValue?: boolean;
 }
 
-export default ProgressBar;
+declare class ProgressBar {
+    $props: ProgressBarProps;
+}
+
+export default ProgressBar;

src/components/progressspinner/ProgressSpinner.d.ts

@@ -1,9 +1,11 @@
-import Vue from 'vue';
-
-declare class ProgressSpinner extends Vue {
+interface ProgressSpinnerProps {
     strokeWidth?: string;
     fill?: string;
     animationDuration?: string;
 }
 
-export default ProgressSpinner;
+declare class ProgressSpinner {
+    $props: ProgressSpinnerProps;
+}
+
+export default ProgressSpinner;

src/components/radiobutton/RadioButton.d.ts

@@ -1,9 +1,11 @@
-import Vue from 'vue';
-
-declare class RadioButton extends Vue {
+interface RadioButtonProps {
     value?: any;
     modelValue?: any;
+}
+
+declare class RadioButton {
+    $props: RadioButtonProps;
     $emit(eventName: string, event: Event): this;
 }
 
-export default RadioButton;
+export default RadioButton;

src/components/rating/Rating.d.ts

@@ -1,12 +1,14 @@
-import Vue from 'vue';
-
-declare class Rating extends Vue {
+interface RatingProps {
     modelValue?: number;
     disabled?: boolean;
     readonly?: boolean;
     stars?: number;
     cancel?: boolean;
+}
+
+declare class Rating {
+    $props: RatingProps;
     $emit(eventName: 'change', e: { originalEvent: Event, value: any }): this;
 }
 
-export default Rating;
+export default Rating;

src/components/row/Row.d.ts

@@ -1,5 +1,7 @@
-import Vue from 'vue';
+interface RowProps {}
 
-declare class Row extends Vue {}
+declare class Row {
+    $props: RowProps;
+}
 
-export default Row;
+export default Row;

src/components/scrollpanel/ScrollPanel.d.ts

@@ -1,9 +1,12 @@
-import Vue, {VNode} from 'vue';
+import { VNode } from 'vue';
 
-declare class ScrollPanel extends Vue {
+interface ScrollPanelProps {}
+
+declare class ScrollPanel {
+    $props: ScrollPanelProps;
     $slots: {
         '': VNode[];
     }
 }
 
-export default ScrollPanel;
+export default ScrollPanel;

src/components/scrolltop/ScrollTop.d.ts

@@ -1,10 +1,12 @@
-import Vue from 'vue';
-
-declare class ScrollTo extends Vue {
+interface ScrollToProps {
     target?: string;
     threshold?: number;
     icon?: boolean;
     behavior?: boolean;
 }
 
-export default ScrollTo;
+declare class ScrollTo {
+    $props: ScrollToProps;
+}
+
+export default ScrollTo;

src/components/selectbutton/SelectButton.d.ts

@@ -1,6 +1,6 @@
-import Vue, { VNode } from 'vue';
+import { VNode } from 'vue';
 
-declare class SelectButton extends Vue {
+interface SelectButtonProps {
     modelValue?: any;
     options?: any[];
     optionLabel?: string;
@@ -10,6 +10,10 @@ declare class SelectButton extends Vue {
     disabled?: boolean;
     dataKey?: string;
     ariaLabelledBy?: string;
+}
+
+declare class SelectButton {
+    $props: SelectButtonProps;
     $emit(eventName: 'focus', event: Event): this;
     $emit(eventName: 'blur', event: Event): this;
     $slots: {
@@ -17,4 +21,4 @@ declare class SelectButton extends Vue {
     }
 }
 
-export default SelectButton;
+export default SelectButton;

src/components/sidebar/Sidebar.d.ts

@@ -1,6 +1,6 @@
-import Vue, { VNode } from 'vue';
+import { VNode } from 'vue';
 
-declare class Sidebar extends Vue {
+interface SidebarProps {
     visible?: boolean;
     position?: string;
     baseZIndex?: number;
@@ -9,6 +9,10 @@ declare class Sidebar extends Vue {
     showCloseIcon?: boolean;
     modal?: boolean;
     ariaCloseLabel?: string;
+}
+
+declare class Sidebar {
+    $props: SidebarProps;
     $emit(eventName: 'show'): this;
     $emit(eventName: 'hide'): this;
     $slots: {
@@ -16,4 +20,4 @@ declare class Sidebar extends Vue {
     }
 }
 
-export default Sidebar;
+export default Sidebar;