0xD34F

preg_replace_callback('#\[~(.*?)~\]#', fn($m) => $arr['person'][$m[1]], $str)

убрать закрытие по клику на фоне

Опции не нашел такой

а я нашёл

Сделать вычисляемое свойство - объект, который будет содержать всё, что требуется отслеживать. Установить наблюдение за этим свойством.

Пусть у каждого элемента массива tests будет собственное свойство show, а не одно на всех. Заменяете:

@click="show = !show" ---> @click="test.show = !test.show"

{{this.show === false ? 'Open' : 'Close'}} ---> {{ test.show ? 'Close' : 'Open' }}

<div v-if="show" > ---> <div v-if="test.show">

Это в случае, когда скрытый контент должен показываться независимо в каждом столбце.

Если же показывать надо не более одного (при клике на другой текущий открытый закрывается), тогда show должен быть индексом соответствующего элемента данных или ссылкой на него, например:

@click="show = !show" ---> @click="show = show === test ? null : test"

{{this.show === false ? 'Open' : 'Close'}} ---> {{ show === test ? 'Close' : 'Open' }}

<div v-if="show" > ---> <div v-if="show === test">

Вот коротко:

const group = (arr, idKey, valKey) =>
  Object.values(arr.reduce((acc, { [idKey]: id, [valKey]: val }) => (
    (acc[id] ??= { [idKey]: id, [valKey]: [] })[valKey].push(val),
    acc
  ), {}));

const result = group(data, 'id', 'color');

Но если вдруг краткость не основной приоритет, то можно сообразить функцию группировки более универсальную:

function group(data, key, val = n => n) {
  const getKey = key instanceof Function ? key : n => n[key];
  const getVal = val instanceof Function ? val : n => n[val];
  const result = new Map;

  for (const n of data) {
    const k = getKey(n);
    result.set(k, result.get(k) ?? []).get(k).push(getVal(n));
  }

  return result;
}

const result = Array.from(
  group(data, 'id', 'color'),
  ([ id, colors ]) => ({ id, colors })
);

str.split(';').pop()
// или
str.replace(/.*;/, '')
// или
str.match(/;(.*)/)[1]
// или
/[^;]+$/.exec(str).shift()
// или
str.slice(str.lastIndexOf(';') + 1)
// или
[...str].reduce((acc, n) => n === ';' ? '' : acc + n)
// или
Array.from(str).filter((n, i, a) => !a.includes(';', i)).join('')

Собрать новый массив:

const newArr = arr.map(function(n) {
  return [ ...n, ...Array(this - n.length).fill('') ];
}, Math.max(...arr.map(n => n.length)));

Обновить существующий:

const max = arr.reduce((max, { length: n }) => max > n ? max : n, 0);
arr.forEach(n => n.push(...Array(max - n.length).fill('')));

Вместо логического значения пусть будет идентификатор окна, которое надо открыть:

<button onClick={() => setModal('раз окно')}>1</button>
<button onClick={() => setModal('два окно')}>2</button>
<button onClick={() => setModal('три окно')}>3</button>
...
<Modal display={modal === 'раз окно'}>...</Modal>
<Modal display={modal === 'два окно'}>...</Modal>
<Modal display={modal === 'три окно'}>...</Modal>

Понятно, что читать спецификацию (+, parseInt) вы вряд ли будете, раз не смогли отличия хотя бы погуглить, так что вот вам несколько примеров разницы, а дальше думайте сами, где что использовать:

parseInt('1!!!') // 1
+'1!!!' // NaN


parseInt('') // NaN
+'' // 0


parseInt('3.14159') // 3
+'3.14159' // 3.14159


parseInt('0b1000101') // 0
+'0b1000101' // 69


parseInt('0o273') // 0
+'0o273' // 187


parseInt({ valueOf: () => 666 }) // NaN
+({ valueOf: () => 666 }) // 666


parseInt('1000000000', 2) // 512
+'1000000000' // 1000000000


parseInt('99', 8) // NaN
+'99' // 99


parseInt('DEAD', 16) // 57005
+'DEAD' // NaN

Куда надо записывать новый текст, откуда этот текст брать и как его там найти:

const target = document.querySelector('.color__des-item');
const container = document.querySelector('.color__list');
const key = 'name';
const attr = `data-${key}`;
const buttonSelector = `[${attr}]`;

Как достать из элемента значение data-атрибута:

const getAttr = el => el.dataset[key];
// или
const getAttr = el => el.getAttribute(attr);
// или
const getAttr = el => el.attributes[attr].value;

Обработчик клика можно назначить каждому элементу с data-атрибутом индивидуально:

container.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => target.textContent = getAttr(e.currentTarget));

Или, один раз - их общему предку:

container.addEventListener('click', ({ target: t }) =>
  (t = t.closest(buttonSelector)) &&
  (target.innerText = getAttr(t))
);

function update(target, source, key, props) {
  source.forEach(function(n) {
    const item = this[n[key]];
    item && props.forEach(m => item[m] = n[m]);
  }, Object.fromEntries(target.map(n => [ n[key], n ])));
}


update(directions, [ { раз объект }, { два объект }, ... ], 'id', [ 'color' ]);

Обернуть tr, который должен присутствовать всегда и tr, который должен присутствовать в зависимости от условия в общий template:

<tbody>
  <template v-for="item in data">
    <tr>...</tr>
    <tr v-if="...">...</tr>
  </template>
</tbody>

re.sub(r'\{color.*?\}', '', text)

re.findall(r'\d+\.\d{2}(?!\d)', text)

То, что возвращает рекурсивный вызов, тоже в результирующий массив надо засовывать.

/\.(?=.*@)/g

Подскажите самые простые учебники / статьи / видео курсы по React, где нормальным языком доступно объясняется.

Документация.

На офф сайте читал и мануалы и практическое руководство, тяжело очень дается и порой не понтно что к чему и зачем.

Значит, рано за react взялись. Это ОЧЕНЬ простая вещь - конечно, для тех, кто готов её осваивать.

фразы оттуда навроде "Подъём состояния в родительский компонент — обычное дело при рефакторинге React-компонентов." лишь отпугивают новичков вроде меня

Вот это хорошо. Новичкам react ни к чему.

C javascript знаком на базовом уровне

Этого мало.

Чтобы выполнялись привязки обработчиков событий, атрибутов и т.д., вместо засовывания строки в v-html надо её компилировать как шаблон компонента, как-то так:

<component :is="getComponent(text)"></component>

methods: {
  getComponent(text) {
    return Object.assign(Vue.compile(`<div>${this.getMessageHtml(text)}</div>`), {
      methods: {
        // сюда пробрасываете нужный вам обработчик клика
      },
    });
  },
  ...

Хотя, в данном случае, это делать не обязательно, можно воспользоваться делегированием - вместо кнопок вешайте обработчик клика куда-нибудь повыше, например:

<div v-html="getMessageHtml(text)" @click="onClick"></div>

methods: {
  onClick(e) {
    if (e.target.tagName === 'BUTTON') {
      // убедились, что клик был по кнопке - теперь делайте чего там вам надо
    }
  },
  ...

document.addEventListener('click', e => {
  let t = e.target;
  for (; t !== document && !t.matches('.more-btn'); t = t.parentNode) ;
  for (const n of document.getElementsByClassName('more-btn')) {
    n.classList.toggle('active', n === t && !n.classList.contains('active'));
  }

  // или

  document.querySelectorAll('.more-btn').forEach(function(n) {
    n.classList[n === this ? 'toggle' : 'remove']('active');
  }, e.target.closest('.more-btn'));
});

li:first-child:hover ~ li:last-child {
  display: none;
}