0xD34F

last_day = calendar.monthrange(year, month)

При запросе 2025 год и месяц май выдает кортеж (3, 31)
3 день недели последний, и 31 день в месяце.

Будет круто, если вы заведёте себе привычку читать документацию

а) Внимательно, а не одним глазом наискось - номер дня недели выдаётся не последний, а первый
б) Чуть дальше, чем о той штуке, что первой пришла на ум - в calendar есть инструменты, решающие вашу задачу:

days_in_month = calendar.monthrange(year, month)[1]
last_weekday_number = calendar.weekday(year, month, days_in_month)
last_weekday_name = calendar.day_name[last_weekday_number]

в консоли по клику выводится null

Которые вы сами и установили в качестве значений ссылок на элементы - коллбек useEffect'а выполняется после ref'а, так что вы затираете только что сохранённые ссылки.

Вместо создания нового массива с null'ами вырезайте нужное из уже существующего:

- compRefs.current = Array(numComp).fill(null);
+ compRefs.current = compRefs.current.slice(0, numComp);

const props = computed(() => isDragging.value
  ? { onClickCapture: withModifiers(onClick, [ 'prevent', 'stop' ]) }
  : null // или { onClick }, если надо только модификаторы убрать
);

<div v-bind="props">

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

const state = {
  checked: new Set([
    // если какие-то категории должны быть выбраны изначально,
    // то их следует перечислить здесь
  ]),
  ...

По событию change добавляем или удаляем значение в/из множества, в зависимости от состояния чекбокса:

document.querySelectorAll('.sockets').forEach(n => {
  n.checked = state.checked.has(+n.value);
  n.addEventListener('change', onChange);
});

function onChange({ target: t }) {
  state.checked[t.checked ? 'add' : 'delete'](+t.value);
  render();
}

Если множество пустое - выводим всё, что есть; не пустое - предварительно выполняем фильтрацию:

function render() {
  const { data, checked } = state;
  const toRender = checked.size
    ? data.filter(n => checked.has(n.category))
    : data;

  document.querySelector('#root').innerHTML = toRender
    .map(n => `<h6>${n.name}</h6>`)
    .join('');
}

render();

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

Складываем в массивы описания радиокнопок:

const presence = [
  { value:    'coming', text:    'Приду' },
  { value: 'notComing', text: 'Не приду' },
];

const transport = [
  { value: 'yes', text:  'Да' },
  { value:  'no', text: 'Нет' },
];

Создаём стейт с данными формы и метод его обновления:

const [ formData, setFormData ] = useState({});
const onChange = ({ target: t }) =>
  setFormData(fd => ({
    ...fd,
    [t.name]: t.value,
  }));

Создаём компоненты радиокнопки и радиогруппы:

const Radio = ({ children, className, ...props }) =>
  <label className={className ?? ''}>
    <input type="radio" {...props} />
    {children}
  </label>;

const RadioGroup = ({ title, name, items, value, onChange }) =>
  <div className="radiogroup">
    <div className="radiogroup-title">{title}</div>
    {items.map(n => (
      <Radio
        key={n.value}
        className={`radiogroup-item ${value === n.value ? 'active' : ''}`}
        name={name}
        value={n.value}
        checked={value === n.value}
        onChange={onChange}
      >
        {n.text}
      </Radio>
    ))}
  </div>;

Создаём радиогруппы, используя массивы с описаниями радиокнопок:

<RadioGroup
  title="Подтвердите присутствие"
  name="presence"
  items={presence}
  value={formData.presence}
  onChange={onChange}
/>
<RadioGroup
  title="Нужен ли трансфер до места проведения?"
  name="transport"
  items={transport}
  value={formData.transport}
  onChange={onChange}
/>

Всё.

const getFormData = form =>
  Array.prototype.reduce.call(
    form.elements,
    (acc, { name, type, value, checked }) => {
      const isCheckbox = type === 'checkbox';
      const isRadio = type === 'radio';
      const keys = Array.from(name.matchAll(/\w+|\[(\w*)\]/g), n => n[1] ?? n[0]);
      const key = keys.pop();
      const isArr = !key;
      const values = keys.reduce((p, c, i, a) => {
        return p[c] ??= (-~i === a.length && isArr ? [] : {});
      }, acc);

      if (!isCheckbox || !isArr || checked) {
        values[isArr ? values.length : key] ??=
          (isCheckbox && !isArr  ) ? checked :
          (isRadio    && !checked) ?    null :
                                       value;
      }

      return acc;
    },
    {}
  );

https://jsfiddle.net/a9bctor5/2/

Где, кого и во что надо обернуть:

const parent = document.querySelector('.parent');
const toWrapClass = 'child';
const wrapperTag = 'div';
const wrapperClass = 'wrapper';

Оборачиваем:

[...parent.children].reduce((wrapper, n) => {
  if (n.classList.contains(toWrapClass)) {
    if (!wrapper) {
      wrapper = document.createElement(wrapperTag);
      wrapper.classList.add(wrapperClass);
      n.before(wrapper);
    }
    wrapper.appendChild(n);
    return wrapper;
  }
  return null;
}, null);

или

Array.prototype.reduce.call(
  parent.querySelectorAll(`:scope > .${toWrapClass}`),
  (acc, n, i, a) => (
    n.previousElementSibling !== a[i - 1] && acc.push([]),
    acc.at(-1).push(n),
    acc
  ),
  []
).forEach(n => {
  const wrapper = document.createElement(wrapperTag);
  wrapper.className = wrapperClass;
  parent.insertBefore(wrapper, n[0]);
  wrapper.append(...n);
});

или

const toWrapSelector = `.${toWrapClass}`;
const wrapperHTML = `<${wrapperTag} class="${wrapperClass}"></${wrapperTag}>`;
for (
  let curr = parent.firstElementChild, next = null, prev = null, wrapper = null;
  next = curr?.nextElementSibling, curr;
  prev = curr, curr = next
) {
  if (!curr.matches(toWrapSelector)) {
    continue;
  }
  if (!prev?.matches(toWrapSelector)) {
    curr.insertAdjacentHTML('beforebegin', wrapperHTML);
    wrapper = curr.previousSibling;
  }
  wrapper.insertAdjacentElement('beforeend', curr);
}

Вот так:

import { useSlots, computed } from 'vue';

const slots = useSlots();
const columns = computed(() => slots.default?.().filter(n => n.props));

<table>
  <thead>
    <tr>
      <th v-for="{ props: p, children: c } in columns" :key="p.prop">
        <component v-if="c?.header" :is="c.header" />
        <template v-else>{{ p.label }}</template>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="row in data">
      <td v-for="{ props: p, children: c } in columns" :key="p.prop">
        <component v-if="c?.body" :is="c.body" :row="row" />
        <template v-else>{{ row[p.prop] }}</template>
      </td>
    </tr>
  </tbody>
</table>

при изменении language у меня не меняются переводы

Меняются. С запаздыванием на один шаг. Потому что texts обновляется в эффекте, т.е., после того, как новая версия t будет создана. Так что t получает ссылку на старую версию texts.

Никакого texts не надо, доставайте в t нужный объект из translations напрямую:

const t = useCallback(
  key => key
    .split('.')
    .reduce((p, c) => p?.[c], translations[language]),
  [ language ]
);

Решим задачу в общем виде - сделаем функцию, находящую количество совпадающих элементов у любых итерируемых объектов. Причём под совпадением будем понимать не обязательно непосредственное равенство (оставим это как вариант по умолчанию), а равенство некоторых производных значений. Так что к чёрту filter (а ещё Safari - говорят, яблочные уроды пока не реализовали поддержку методов итераторов; впрочем, сделать обычный for...of вместо reduce не проблема):

function countIntersections(data1, data2, key = n => n) {
  const getKey = key instanceof Function ? key : n => n[key];
  const keys = new Set(Array.from(data2, getKey));
  return data1[Symbol.iterator]().reduce((acc, n) => acc + keys.has(getKey(n)), 0);
}

В вашем случае применять так: const result = countIntersections(newWord, glas);.

Другие примеры использования:

countIntersections(Array(7).keys(), Array(4).keys()) // 4
countIntersections('abCdE', 'ACe', n => n.toLowerCase()) // 3
countIntersections([ { id: 1 }, { id: 2 }, { id: 3 } ], [ { id: 3 } ], 'id') // 1

- app.component('draggable', window['vue3-draggable']);
+ app.component('draggable', window['vue3-draggable'].default);

Вот говнокод:

$result = [];

foreach ($arr as $n) {
  for ($visited = []; array_key_exists($n, $arr); $visited[] = $n, $n = $arr[$n]) {
    if (($i = array_search($n, $visited)) !== false) {
      $loop = array_slice($visited, $i);
      if (empty(array_intersect(array_column($result, 0), $loop))) {
        $result[] = $loop;
      }
      break;
    }
  }
}

или

$result = [];
$visited = [];
$iLoop = -1;

foreach ($arr as $n) {
  for ($iLoop++; isset($arr[$n]); $visited[$n] = $iLoop, $n = $arr[$n]) {
    if (isset($visited[$n])) {
      if ($visited[$n] === $iLoop) {
        for ($loop = [ $m = $n ]; ($m = $arr[$m]) !== $n; $loop[] = $m) ;
        $result[] = $loop;
      }
      break;
    }
  }
}

result = 0

for n in lst:
  for m in n.values():
    for val in m:
      result += val

или

result = sum(val for n in lst for m in n for val in n[m])

$grouped = [];

foreach ($arr as [ 'id' => $id, 'name' => $name, 'key' => $key ]) {
  $grouped[$key][$name] ??= [ 'name' => $name, 'ids' => [] ];
  $grouped[$key][$name]['ids'][] = $id;
}

foreach ($keys as $k) {
  $$k = array_map(fn($n) => [
    'name' => $n['name'],
    'ids' => implode(', ', $n['ids'])
  ], array_values($grouped[$k] ?? []));
}

Куда кликаем и что фильтруем:

// такого у вас сейчас нет, сами догадайтесь, кому надо класс добавить
const containerSelector = '.container';

const buttonsSelector = `${containerSelector} .filter__navigation`;
const buttonSelector = `${buttonsSelector} [data-filter]`;
const buttonActiveClass = '_active';

const itemsSelector = `${containerSelector} .search__body`;
const itemSelector = `${itemsSelector} .filter-column`;
const itemHiddenClass = '_hide';
const itemFilterClassPrefix = 'filter__column_';

Назначаем обработчик клика каждой кнопке индивидуально:

document.querySelectorAll(buttonSelector).forEach(n => {
  n.addEventListener('click', onFilterButtonClick);
});

function onFilterButtonClick({ currentTarget: { dataset: { filter } } }) {
  const activeItemClass = itemFilterClassPrefix + filter;

  this.closest(buttonsSelector).querySelectorAll(buttonSelector).forEach(n => {
    n.classList.toggle(buttonActiveClass, n === this);
  });

  this.closest(containerSelector).querySelectorAll(itemSelector).forEach(({ classList: cl }) => {
    cl.toggle(itemHiddenClass, filter !== 'all' && !cl.contains(activeItemClass));
  })
}

Или, применяем делегирование:

document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    const { filter } = button.dataset;
    const activeItemSelector = filter === 'all' ? '*' : `.${itemFilterClassPrefix}${filter}`;

    for (const n of button.closest(buttonsSelector).children) {
      n.classList.toggle(buttonActiveClass, n === button);
    }

    for (const n of button.closest(containerSelector).querySelector(itemsSelector).children) {
      n.classList.toggle(itemHiddenClass, !n.matches(activeItemSelector));
    }
  }
});

Кого на что меняем, объект вида { 'старый ключ': 'новый ключ' }:

const keys = {
  x: 'a',
  y: 'b',
  z: 'c',
};

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

const renameKeys = (obj, keys) =>
  Object.fromEntries(Object
    .entries(obj)
    .map(([ k, v ]) => [ Object.hasOwn(keys, k) ? keys[k] : k, v ])
  );

// или

const renameKeys = (obj, keys) =>
  Object.keys(obj).reduce((acc, k) => (
    acc[keys[k] ?? k] = obj[k],
    acc
  ), {});


const newArr = arr.map(n => renameKeys(n, keys));

Обновляем существующий:

function renameKeys(keys, obj) {
  for (const k in keys) {
    if (obj.hasOwnProperty(k)) {
      obj[keys[k]] = obj[k];
      delete obj[k];
    }
  }
}


arr.forEach(renameKeys.bind(null, keys));

элемент.insertAdjacentHTML('afterend', разметка);
элемент.remove();

// или

элемент.outerHTML = разметка;

Можно попробовать использовать sortable.js:

<el-table
  ref="table"
  ...
>
  ...

const table = ref();

onMounted(() => { 
  new Sortable(table.value.$el.querySelector('thead tr'), {
    handle: 'span',
    onEnd(e) {
      columns.value.splice(e.newIndex, 0, columns.value.splice(e.oldIndex, 1)[0]);
    },
  });
});

colors: markerColors, // Устанавливаем цвета маркеров в зависимости от результата

Эта настройка предназначена для назначения цветов не отдельных маркеров, а относящихся к одному набору данных. Так что, чтобы заработало так, как вы хотите, придётся данные разделить. После чего использовать эту настройку станет уже необязательно - цвета можно задавать непосредственно внутри наборов данных. Недостаток - общей линией точки на графике не будут соединены.

Другой вариант - воспользоваться свойством discrete, позволяющим индивидуально настраивать внешний вид каждого маркера. Всплывающую подсказку это никак не затрагивает, так что её придётся кастомизировать отдельно.