0xD34F

app.use(Maska, store, axios, Vue3TouchEvents)

Это как? Бегом документацию читать.

closest + querySelector

как вернуть к первоначальному состоянию когда unchecked не понимаю

Очевидно, устанавливать в качестве результата фильтрации не его текущее значение, а полные данные.

Ну и ещё неплохо бы сделать так, чтобы фильтрация по введённой строке не отменяла фильтрацию по чекбоксу - унесите их в один общий эффект, чтобы они работали совместно:

function Posts() {
  const [ posts, setPosts ] = useState([]);
  const [ filteredPosts, setFilteredPosts ] = useState([]);
  const [ search, setSearch ] = useState('');
  const [ checkbox, setCheckbox ] = useState(false);

  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then(r => setPosts(r.data));
  }, []);

  useEffect(() => {
    let filtered = posts;

    if (search) {
      const s = search.toLowerCase();
      filtered = filtered.filter(n => n.title.toLowerCase().includes(s));
    }

    if (checkbox) {
      filtered = filtered.filter(n => n.userId === 10);
    }

    setFilteredPosts(filtered);
  }, [ posts, search, checkbox ]);

  return (
    <>
      <input
        type="text"
        placeholder="Search for article..."
        value={search}
        onChange={e => setSearch(e.target.value)}
      />
      <label>
        User Id 10
        <input
          type="checkbox"
          checked={checkbox}
          onChange={e => setCheckbox(e.target.checked)}
        />
      </label>

      <ul>
        {filteredPosts.map(n => (
          <li key={n.id}>
            <div>{n.userId}</div>
            <div>{n.title}</div>
            <div>{n.body}</div>
          </li>
        ))}
      </ul>
    </>
  );
}

Если сами добавляете класс, то, очевидно, дёргать метод start в момент добавления. Если не сами, тогда следите за элементом с помощью MutationObserver:

new MutationObserver((mutations, observer) => {
  if (mutations[0].target.classList.contains('интересующий-вас-класс')) {
    observer.disconnect();
    typed.start();
  }
}).observe(элементНаличиеКлассаУКоторогоНадоОтследить, { attributes: true });

Вместо массива расстояний до заданной точки достаточно хранить одно минимальное. При обработке элемента locations вычисляете расстояние, сравниваете с текущим минимальным, если оно всё ещё меньше - ничего не делаете, в противном случае запоминаете новое минимальное и соответствующий ему элемент массива locations:

const getTheNearestLocation = (locations, [ x, y ]) =>
  locations.reduce((nearest, n) => {
    const d = ((n[1][0] - x) ** 2 + (n[1][1] - y) ** 2) ** 0.5;
    return nearest[1] < d ? nearest : [ n, d ];
  }, [ null, Infinity ])[0];

Где элементы находятся, какой id выступает в роли ограничителя:

const parent = document.querySelector('ul');
const id = 'item';

Получаем элементы:

const elems = Array.from(parent.children);
const index = elems.findIndex(n => n.id === id);
const result = index === -1 ? elems : elems.slice(0, index);

// или

const result = [...parent.querySelectorAll(`:not(#${id}, #${id} ~ *)`)];

// или

const result = [];
for (
  let el = parent.firstElementChild;
  el && el.id !== id;
  el = el.nextElementSibling
) {
  result.push(el);
}

Подключить роутер. Выделить под подробную информацию отдельный маршрут. Параметром маршрута сделать id. Включить проброс параметров в компонент маршрута. Компонент, используя полученный id, будет извлекать информацию из хранилища (оформить это дело как вычисляемое свойство). Вот так всё просто.

Так же, как и обычный список:

{items.map(n => <div className="item">...</div>)}

Увеличенную ширину задать через css:

.item:nth-child(6n + 3),
.item:nth-child(6n + 4) {
  ...
}

https://jsfiddle.net/exfk10Ls/1/

Выдёргиваем из объектов значения, сортируем, берём сколько надо крайних, собираем строку:

const result = arr
  .map(Object.values)
  .sort((a, b) => b - a)
  .slice(0, 3)
  .join(', ');

Конечно, по-хорошему, вместо map следовало бы использовать flatMap, но пока в элементах массива содержится по одному свойству - и так сойдёт.

const makeCensored = (str, words, replacement = '***') =>
  str
    .split(' ')
    .map(n => words.includes(n) ? replacement : n)
    .join(' ');

function merge($idKey, $mergeKeys, ...$data) {
  $merged = [];

  foreach (array_merge(...$data) as $item) {
    $id = $item[$idKey];

    if (!array_key_exists($id, $merged)) {
      $merged[$id] = [
        'unique' => true,
        'item' => $item,
      ];
    } else {
      if ($merged[$id]['unique']) {
        $merged[$id]['unique'] = false;
        foreach ($mergeKeys as $k) {
          $merged[$id]['item'][$k] = [ $merged[$id]['item'][$k] ];
        }
      }

      foreach ($mergeKeys as $k) {
        $merged[$id]['item'][$k][] = $item[$k];
      }
    }
  }

  return array_column($merged, 'item');
}


$merged = merge('code', [ 'quantity', 'city' ], $arr1, $arr2);

Поскольку в документации к компоненту на этот счёт ничего не сказано, придётся использовать ymaps api напрямую. Чтобы получить к нему доступ, воспользуйтесь loadYmap. Чтобы получить доступ к карте, получите ссылку на экземпляр её компонента, карта будет доступна как свойство myMap. Ну а раздел документации карт, посвящённый созданию кнопок, вы уже видели - так что берёте и создаёте.

const obj = Object.fromEntries(await Promise.all(ids.map(async n => [ n, await loadPosts(n) ])));

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');

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('')));