0xD34F

options: {
  legend: {
    display: false,
  },
},

Attempted import error: 'CreateGlobalStyle' is not exported from 'styled-components'.

Ясно.

Разницу между CreateGlobalStyle и createGlobalStyle самостоятельно разглядеть сможете?

Добавляете в компонент свойство selectedCity, даёте пользователю возможность устанавливать его значение:

<a
  v-for="city in cities"
  @click="selectedCity = city.name"
  class="dropdown-button__item dropdown-item"
>{{ city.name }}</a>

По значению selectedCity достаёте карты:

computed: {
  maps() {
    return (this.cities.find(n => n.name === this.selectedCity) || {}).transport;
  },
},

Если город выбран и, соответственно, карты есть - они показываются пользователю:

<div class="how-to-get__map-wrap" v-if="maps">
  <iframe v-for="map in maps" :src="map.mapLink" frameborder="0" allowfullscreen="true"></iframe>
</div>

array_push($target, ...array_slice($source, $start, $length));

/^\d{2,3}-\d{2,3}$/

Очевидно же - добавлять disabled. Для выбранного чекбокса - когда количество выбранных чекбоксов меньше или равно минимально допустимому. Для не выбранного - когда количество выбранных чекбоксов больше или равно максимально допустимому.

https://jsfiddle.net/x6uzv5hw/

Чекбоксы кастомные и при втором клике на один из них - они полностью игнорируют свойства checked и disabled

Ну значит криво вы их реализовали, только и всего. Погуглите, как сделать правильно.

minimap

const idsA = new Set(ListA.map(n => n.id));
const objB = Object.fromEntries(ListB.map(({ uid, ...n }) => [ uid, (n.id = uid, n) ]));
const ListAB = ListA.map(n => ({ ...n, ...objB[n.id] }));
ListB.forEach(({ uid }) => idsA.has(uid) || ListAB.push(objB[uid]));

Останавливайте всплытие при клике на инпут:

$list.find('input').click(e => e.stopPropagation());

Или проверяйте целевой элемент (это в обработчике клика по $listItems):

if (!$(e.target).is('input')) {
  $list.hide();
}

Вынесите её в thead.


UPD. Как это может выглядеть: thead, и дурацкий вариант.

str.match(/rgb\(.*\)/).pop().match(/\d+/g)

или

str.match(/rgb\((.*)\)/).pop().split(', ')

Замените

projectTechnologies.innerHTML = technologyHandler(dataTechnologies).map((el) => el);

на

projectTechnologies.innerHTML = technologyHandler(dataTechnologies).map(n => n.outerHTML).join('');

// или

technologyHandler(dataTechnologies).forEach(n => projectTechnologies.appendChild(n));

// или

for (const n of technologyHandler(dataTechnologies)) {
  projectTechnologies.insertAdjacentElement('beforeend', n);
}

// или

projectTechnologies.append(...technologyHandler(dataTechnologies));

ИЛИ

Перепишите technologyHandler следующим образом:

const technologyHandler = str => str
  .split(' ')
  .map(n => `<p class="project_technologies-item">${n}</p>`)
  .join('');

// или

const technologyHandler = str =>
  str.replace(/ ?(\S+)/g, '<p class="project_technologies-item">$1</p>');

И уберите map после её вызова:

projectTechnologies.innerHTML = technologyHandler(dataTechnologies);

Во-первых - погуглите, что такое всплытие событий.

Во-вторых - про модификаторы событий слышали? Надо бы self прикрутить - это если на "тень". Или stop - на окно.

:href="`https://oauth.vk.com/authorize?client_id=${client_id}`"

или

computed: {
  href() {
    return `https://oauth.vk.com/authorize?client_id=${this.client_id}`;
  },
},

:href="href"

или

methods: {
  href: client_id => `https://oauth.vk.com/authorize?client_id=${client_id}`,
},

:href="href(client_id)"

const digits = Object
  .entries([...`${num}`].reduce((acc, n) => (acc[n] = (acc[n] || 0) + 1, acc), {}))
  .reduce((acc, n) => (n[1] > 1 && acc.push(+n[0]), acc), []);

или

const digits = num
  .toString()
  .split('')
  .reduce((acc, n) => (acc[n]++, acc), Array(10).fill(0))
  .map((n, i) => n > 1 && i)
  .filter(n => n !== false);

или

const digits = Array
  .from(String(num), Number)
  .filter((n, i, a) => i !== a.indexOf(n))
  .filter((n, i, a) => i === a.indexOf(n));

или

const digits = (('' + num)
  .match(/\d/g)
  .sort()
  .join('')
  .match(/(\d)\1+/g) || [])
  .map(n => n[0] | 0);

Ловите событие change, обходите элементы, собирайте запрос. В чём проблема-то? Например.

const values = [ 'text', 'move', 'lols' ];
const selector = values.map(n => `[data-cmd="${n}"]`).join(', ');
const elements = document.querySelectorAll(selector);

elements.forEach(n => n.style.display = 'none');

$('.count').on('input', e => $('.game_iframe').width(e.target.value));

или

document.querySelector('.count').addEventListener('input', function() {
  document.querySelector('.game_iframe').style.width = `${this.value}px`;
});

да всё как обычно

если нужно несколько экземпляров, стилизованных единообразно, можно сделать компонент-обёртку