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: {

src/components/accordiontab/AccordionTab.d.ts

@@ -1,9 +1,13 @@
-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[];

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;

src/components/avatar/Avatar.d.ts

@@ -1,9 +1,11 @@
-import Vue from 'vue';
+interface AvatarProps {
-
-declare class Avatar extends Vue {
     label?: string;
     icon?: string;
     image?: string;
 }
 
+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;

src/components/badge/Badge.d.ts

@@ -1,9 +1,11 @@
-import Vue from 'vue';
+interface BadgeProps {
-
-declare class Badge extends Vue {
     value?: any;
     severity?: string;
     size?: string;
 }
 
+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;

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: {

src/components/breadcrumb/Breadcrumb.d.ts

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

src/components/button/Button.d.ts

@@ -1,6 +1,4 @@
-import Vue from 'vue';
+interface ButtonProps {
-
-declare class Button extends Vue {
     label?: string;
     icon?: string;
     iconPos?: string;
@@ -8,4 +6,8 @@ declare class Button extends Vue {
     badgeClass?: string;
 }
 
+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;

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[];

src/components/carousel/Carousel.d.ts

@@ -1,6 +1,6 @@
-import Vue, {VNode} from 'vue';
+import { VNode } from 'vue';
 
-declare class Carousel extends Vue {
+interface CarouselProps {
     value?: any;
 	page?: number;
 	numVisible?: 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[];

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;

src/components/chart/Chart.d.ts

@@ -1,11 +1,13 @@
-import Vue from 'vue';
+interface ChartProps {
-
-declare class Chart extends Vue {
     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;

src/components/checkbox/Checkbox.d.ts

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

src/components/chip/Chip.d.ts

@@ -1,6 +1,4 @@
-import Vue from 'vue';
+interface ChipProps {
-
-declare class Chip extends Vue {
     label?: string;
     icon?: string;
     image?: string;
@@ -8,4 +6,8 @@ declare class Chip extends Vue {
     removeIcon?: string;
 }
 
+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: {

src/components/colorpicker/ColorPicker.d.ts

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

src/components/column/Column.d.ts

@@ -1,6 +1,4 @@
-import Vue from 'vue';
+interface ColumnProps {
-
-declare class Column extends Vue {
     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';
+interface ColumnGroupProps {
-
-declare class ColumnGroup extends Vue {
     type?: string;
 }
 
+declare class ColumnGroup {
+    $props: ColumnGroupProps;
+}
+
 export default ColumnGroup;

src/components/confirmdialog/ConfirmDialog.d.ts

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

src/components/confirmpopup/ConfirmPopup.d.ts

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

src/components/contextmenu/ContextMenu.d.ts

@@ -1,11 +1,13 @@
-import Vue from 'vue';
+interface ContextMenuProps {
-
-declare class ContextMenu extends Vue {
     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;

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[];

src/components/dataviewlayoutoptions/DataViewLayoutOptions.d.ts

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

src/components/deferredcontent/DeferredContent.d.ts

@@ -1,6 +1,9 @@
-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[];

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: {

src/components/divider/Divider.d.ts

@@ -1,9 +1,11 @@
-import Vue from 'vue';
+interface DividerProps {
-
-declare class Divider extends Vue {
     align?: string;
     layout?: string;
     type?: string;
 }
 
+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;

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: {

src/components/fieldset/Fieldset.d.ts

@@ -1,9 +1,13 @@
-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[];

src/components/fileupload/FileUpload.d.ts

@@ -1,6 +1,4 @@
-import Vue from 'vue';
+interface FileUploadProps {
-
-declare class FileUpload extends Vue {
     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;

src/components/fullcalendar/FullCalendar.d.ts

@@ -1,8 +1,10 @@
-import Vue from 'vue';
+interface FullCalendarProps {
-
-declare class FullCalendar extends Vue {
     events?: any[];
     options?: object;
 }
 
+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[];

src/components/inlinemessage/InlineMessage.d.ts

@@ -1,7 +1,11 @@
-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[];
     }

src/components/inplace/Inplace.d.ts

@@ -1,8 +1,12 @@
-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[];

src/components/inputmask/InputMask.d.ts

@@ -1,11 +1,13 @@
-import Vue, { VNode } from 'vue';
+interface InputMaskProps {
-
-declare class InputMask extends Vue {
     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;

src/components/inputnumber/InputNumber.d.ts

@@ -1,6 +1,4 @@
-import Vue from 'vue';
+interface InputNumberProps {
-
-declare class InputNumber extends Vue {
     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';
+interface InputSwitchProps {
-
-declare class InputSwitch extends Vue {
     modelValue?: boolean;
 }
 
+declare class InputSwitch {
+    $props: InputSwitchProps;
+}
+
 export default InputSwitch;

src/components/inputtext/InputText.d.ts

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

src/components/knob/Knob.d.ts

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

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;

src/components/megamenu/MegaMenu.d.ts

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

src/components/menu/Menu.d.ts

@@ -1,11 +1,13 @@
-import Vue from 'vue';
+interface MenuProps {
-
-declare class Menu extends Vue {
     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;

src/components/menubar/Menubar.d.ts

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

src/components/message/Message.d.ts

@@ -1,10 +1,14 @@
-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[];
     }

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;

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[];

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;

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;

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[];

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[];

src/components/panelmenu/PanelMenu.d.ts

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

src/components/password/Password.d.ts

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

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;

src/components/progressbar/ProgressBar.d.ts

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

src/components/progressspinner/ProgressSpinner.d.ts

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

src/components/radiobutton/RadioButton.d.ts

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

src/components/rating/Rating.d.ts

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

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;

src/components/scrollpanel/ScrollPanel.d.ts

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

src/components/scrolltop/ScrollTop.d.ts

@@ -1,10 +1,12 @@
-import Vue from 'vue';
+interface ScrollToProps {
-
-declare class ScrollTo extends Vue {
     target?: string;
     threshold?: number;
     icon?: boolean;
     behavior?: boolean;
 }
 
+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: {

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: {