MapSyncProps

mapSyncProps - помогает удобно работать с синхронными пропами, избавляя от boilerplate типа

export default {
  props: {
    foo: Boolean,
  },

  computed: {
    compFoo: {
      get() {
        return this.foo;
      },
      set(newVal) {
        this.$emit('update:foo', newVal);
      },
    },
  },
};

Хелпер поддерживает 3 набора аргументов: Object, Array, Composition

Object syntax (Options api)

Объектный синтаксис используется в случаях где нужно управлять названием computed свойств

Ключи объекта являются ключами новых computed свойств, значения названиями пропов

Typing

type MapSyncResult<MapKeys extends Record<string, string>> = {
  [K in keyof MapKeys]: GetSet<any>;
}

function mapSyncProps<MapKeys extends Record<string, string>>(arrOrObject: MapKeys): MapSyncResult<MapKeys>;

Example

import mapSyncProps, { mapSyncObject } from 'shared-front/lib/utils/map-sync-props';

export default {
  props: {
    foo: Boolean,
    bar: Boolean,
  },

  computed: {
    ...mapSyncProps({
      compFoo: 'foo',
      compSomeBar: 'bar',
    }),
  },
}

Array syntax (Options api)

Синтаксис через массив строк, является небольшим упрощением над объектным, добавляет ко всем ключам префикс comp и делает первый символ заглавными 'foo' -> 'compFoo'

Typing

type MapSyncResult<MapKeys extends Record<string, string>> = {
  [K in keyof MapKeys]: GetSet<any>;
}

function mapSyncProps<Keys extends readonly string[]>(arrOrObject: Keys): MapSyncResult<CompMapKeys<Keys>>;

Example

import mapSyncProps, { mapSyncArray } from 'shared-front/lib/utils/map-sync-props';

export default {
  props: {
    foo: Boolean,
    bar: Boolean,
  },

  computed: {
    ...mapSyncProps(['foo', 'bar']),

    // Identical
    // ...mapSyncProps({
    //  compFoo: 'foo',
    //  compBar: 'bar',
    // }),
  },
}

Composition syntax (Composition api)

Синтаксис для использования в Composition API

Первым аргументом принимает функцию emit, вторым пропы в сыром или toRefs виде

Возвращает ToRefs подобный объект

Typing

type UseMapSyncResult<MapValues extends Record<string, any>> = {
  [K in keyof MapValues]: WritableComputedRef<UnwrapRef<MapValues[K]>>
}

function mapSyncProps<MapValues extends Record<string, any>>
  (arrOrObject: SetupContext['emit'], props: MapValues | UnwrapNestedRefs<MapValues>): UseMapSyncResult<MapValues>

Examples

import mapSyncProps, { useMapSync } from 'shared-front/lib/utils/map-sync-props';

export default defineComponent({
  props: {
    foo: Boolean,
    bar: Boolean,
  },

  setup(props, context) {
    const {
      foo: compFoo,
      bar: compBar,
    } = mapSyncProps(context.emit, props);

    const baz = computed(() => compFoo.value);

    return {
      compFoo,
      compBar,
      baz,
    };
  },
});

<template>
  <input v-model="modelValue">
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';

import mapSyncProps, { useMapSync } from 'shared-front/lib/utils/map-sync-props';


const props = defineProps({ modelValue: String });
const emit = defineEmits(['update:modelValue']);


const { modelValue } = mapSyncProps(emit, props);
</script>