Component Properties

/**
 * Declares component properties with optional type validation and defaults
 * @param options - PropOptions object, Constructor array, or single Constructor (optional, defaults to {})
 * @returns Property decorator function
 */
function Prop(options: PropOptions | Constructor[] | Constructor = {}): PropertyDecorator;

interface PropOptions {
  type?: PropType<any> | true;
  required?: boolean;
  default?: any;
  validator?(value: any): boolean;
}

import { Vue, Component, Prop } from "vue-property-decorator";

@Component
export default class MyComponent extends Vue {
  // Basic prop with automatic type inference
  @Prop()
  message!: string;

  // Required prop with explicit type
  @Prop({ type: String, required: true })
  title!: string;

  // Prop with default value
  @Prop({ default: 42 })
  count!: number;

  // Prop with multiple types
  @Prop([String, Number])
  value!: string | number;

  // Prop with validator
  @Prop({
    type: String,
    validator: (value) => ["small", "medium", "large"].includes(value)
  })
  size!: string;
}

/**
 * Creates two-way binding for properties with automatic update event emission
 * @param propName - External property name (required)
 * @param options - PropOptions object, Constructor array, or single Constructor (optional, defaults to {})
 * @returns Property decorator function
 */
function PropSync(propName: string, options: PropOptions | Constructor[] | Constructor = {}): PropertyDecorator;

import { Vue, Component, PropSync } from "vue-property-decorator";

@Component
export default class MyComponent extends Vue {
  // Creates syncedValue prop with update:syncedValue event
  @PropSync("value", { type: String })
  syncedValue!: string;

  // Usage in template will automatically emit update events
  updateValue() {
    this.syncedValue = "new value"; // Emits update:value
  }
}

/**
 * Defines the model property and event for custom v-model implementation
 * @param event - Event name (optional, defaults to property key)
 * @param options - PropOptions object, Constructor array, or single Constructor (optional, defaults to {})
 * @returns Property decorator function
 */
function Model(event?: string, options: PropOptions | Constructor[] | Constructor = {}): PropertyDecorator;

import { Vue, Component, Model } from "vue-property-decorator";

@Component
export default class CustomInput extends Vue {
  // Default v-model implementation (value prop, input event)
  @Model("input", { type: String })
  value!: string;

  // Custom model with different event
  @Model("change", { type: Boolean })
  checked!: boolean;

  handleInput(event: Event) {
    const target = event.target as HTMLInputElement;
    this.$emit("input", target.value);
  }
}

/**
 * Combines Model and PropSync functionality for complete v-model with sync behavior
 * @param propName - External property name (required)
 * @param event - Event name (optional, defaults to property key)
 * @param options - PropOptions object, Constructor array, or single Constructor (optional, defaults to {})
 * @returns Property decorator function
 */
function ModelSync(propName: string, event?: string, options: PropOptions | Constructor[] | Constructor = {}): PropertyDecorator;

import { Vue, Component, ModelSync } from "vue-property-decorator";

@Component
export default class AdvancedInput extends Vue {
  // Creates a model with automatic sync behavior
  @ModelSync("value", "input", { type: String })
  internalValue!: string;

  // Changes to internalValue automatically emit the specified event
  updateValue(newValue: string) {
    this.internalValue = newValue; // Automatically emits 'input' event
  }
}

/**
 * Creates standard v-model implementation using 'value' prop and 'input' event
 * @param options - PropOptions object (optional, defaults to {})
 * @returns Property decorator function
 */
function VModel(options: PropOptions = {}): PropertyDecorator;

import { Vue, Component, VModel } from "vue-property-decorator";

@Component
export default class StandardInput extends Vue {
  // Standard v-model implementation
  @VModel({ type: String })
  value!: string;

  handleChange(event: Event) {
    const target = event.target as HTMLInputElement;
    this.value = target.value; // Automatically emits 'input' event
  }
}

/**
 * Creates computed property for accessing template references
 * @param refKey - Template ref name (optional, defaults to property name)
 * @returns Property decorator function
 */
function Ref(refKey?: string): PropertyDecorator;

import { Vue, Component, Ref } from "vue-property-decorator";

@Component
export default class MyComponent extends Vue {
  // Access element with ref="myInput"
  @Ref("myInput")
  readonly myInput!: HTMLInputElement;

  // Access element with ref="myButton" (inferred from property name)
  @Ref()
  readonly myButton!: HTMLButtonElement;

  // Access child component
  @Ref("childComponent")
  readonly childComponent!: Vue;

  focusInput() {
    this.myInput.focus();
  }

  getChildData() {
    return (this.childComponent as any).someMethod();
  }
}

interface PropOptions {
  type?: PropType<any> | true;
  required?: boolean;
  default?: any;
  validator?(value: any): boolean;
}

type Constructor = new (...args: any[]) => any;
type PropertyDecorator = (target: any, propertyKey: string | symbol) => void;
type PropType<T> = Constructor | Constructor[] | PropTypeDefinition<T>;

interface PropTypeDefinition<T> {
  type: Constructor | Constructor[];
  default?: T | (() => T);
  required?: boolean;
  validator?(value: T): boolean;
}