Alex

if ( ! function_exists( 'get_wpgen_header_classes' ) ) {

	/**
	 * Get classes for header container.
	 *
	 * @param string $class Additional header classes.
	 *
	 * @return array
	 */
	function get_wpgen_header_classes( $class = '' ) {

		// Add elements to array.
		$classes   = array();
		$classes[] = 'header';

		if ( has_custom_header() ) {
			$classes[] = 'header--background-image';
		}

		if ( is_front_page() || is_home() ) {
			$classes[] = 'header-bg';
		} else {
			$classes[] = 'custom-class';
		}

		// Check the function has accepted any classes.
		if ( isset( $class ) && ! empty( $class ) ) {
			if ( is_array( $class ) ) {
				$classes = array_merge( $classes, $class );
			} elseif ( is_string( $class ) ) {
				$classes = array_merge( $classes, explode( ' ', $class ) );
			}
		}

		$classes = apply_filters( 'get_wpgen_header_classes', $classes );

		// Usage:
		/*add_filter( 'get_wpgen_header_classes', 'my_header_classes' );
		if ( ! function_exists( 'my_header_classes' ) ) {
			function my_header_classes( $classes ) {
				$classes[] = 'my-class';
				return array_unique( $classes );
			}
		}*/

		return array_unique( (array) $classes );
	}
}

if ( ! function_exists( 'wpgen_header_classes' ) ) {

	/**
	 * Display classes for header container.
	 *
	 * @param string $class Additional header classes.
	 * @param bool   $echo  Echo or return header classes.
	 *
	 * @return string
	 */
	function wpgen_header_classes( $class = '', $echo = true ) {

		$classes = get_wpgen_header_classes( $class );

		if ( $echo ) {
			echo 'class="' . esc_attr( implode( ' ', $classes ) ) . '"';
		} else {
			return 'class="' . esc_attr( implode( ' ', $classes ) ) . '"';
		}
	}
}

<header id="header" <?php wpgen_header_classes(); ?>>

<header id="header" <?php wpgen_header_classes( 'new-class' ); ?>>

@input="$emit('update:modelValue', $event.target.value)"
@keyup.enter="modelValue = $event.target.value"

<div :class="{ ‘pb-2’: isActive }"></div>
data() {
  return {
    isActive: true,
  }
}

<div :class="{ ‘pb-${size}’: isActive }"></div>

props: {
    size: {
        type: string,
        default: 4,
    },
data() {
  return {
    isActive: true,
  }
}

sortOpen() {
  this.$emit('sortOpen', this.sortWindowOpen = !this.sortWindowOpen);
},

<TableControl @sortOpen="addStatic = $event"></TableControl>

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

<CustomInput
  :modelValue="searchText"
  @update:modelValue="newValue => searchText = newValue"
/>

<div v-for="(item, i) in list" :key="i" @click="item.onClick">{{item.value}}</div>

list: [
  {title: 'NAME', value: 'name'},
  {title: 'DATE', value: 'date', onClick() {alert('Ничего себе!')}},
  {title: 'TIME', value: 'TIME'},
],