0xD34F

vue3-mq

this.$mq

Что по этому поводу имеет сказать документация:

$mq has been removed as a global property and must now be injected into components that require it

Изменить отображаемый формат даты можно через соответствующий параметр компонента.

Иконки убираются с помощью css.

"Плейсхолдер" делается через дополнительную обёртку (UPD. Или его можно оформить как кастомную иконку).

(click)="openLink($event, item.key)" ---> (click)="item.isOpen = !item.isOpen"

[class.open]="item.key == activeSelection" ---> [class.open]="item.isOpen"

const createTopic = () => ({
  text: '',
  subtopics: [ createSubTopic() ],
});

const createSubTopic = () => ({
  text: '',
});

const topics = reactive([ createTopic() ]);

<div v-for="(topic, iTopic) in topics">
  <div>
    <div>
      Topic #{{ iTopic + 1 }}:
      <input v-model="topic.text">
    </div>
    <div v-for="(subtopic, iSubtopic) in topic.subtopics">
      Subtopic #{{ iTopic + 1 }}.{{ iSubtopic + 1 }}:
      <input v-model="subtopic.text">
      <button v-if="iSubtopic" @click="topic.subtopics.splice(iSubtopic, 1)">x</button>
    </div>
  </div>
  <button @click="topic.subtopics.push(createSubTopic())">Add subtopic</button>
</div>
<button @click="topics.push(createTopic())">Add topic</button>

const [ items, setItems ] = useState([]);
const [ src, setSrc ] = useState('');

const onChange = e => {
  setSrc(e.target.value);
};

const onClick = () => {
  setSrc('');
  setItems([
    ...items,
    {
      id: 1 + Math.max(0, ...items.map(n => n.id)),
      src,
    },
  ]);
};

const onSortEnd = (iOld, iNew) => {
  setItems(([...items]) => (
    items.splice(iNew, 0, items.splice(iOld, 1)[0]),
    items
  ));
};

<div>
  <input value={src} onChange={onChange} />
  <button onClick={onClick}>add</button>
</div>
<SortableList onSortEnd={onSortEnd}>
  {items.map(n => (
    <SortableItem key={n.id}>
      <img src={n.src} />
    </SortableItem>
  ))}
</SortableList>

from collections import Counter

def how_many_times_can_word_be_made_from_string(word, string):
  count_w = Counter(word)
  count_s = Counter(string)
  return min(count_s[k] // v for k, v in count_w.items())

О каких элементах идёт речь, как получать из них классы, и как переключать классы у их предка:

const containerSelector = '.selectboxss';
const itemClass = 'selectoption';
const itemSelector = `${containerSelector} .${itemClass}`;

const getClasses = el => Array.prototype.filter.call(el.classList, n => n !== itemClass);
//const getClass = el => el.className.match(RegExp(`${itemClass}-\\d+`))[0];

function updateClasses(item) {
  const container = item.closest(containerSelector);
  const { classList: cl } = container;
  cl.remove(...Array.prototype.flatMap.call(container.querySelectorAll(itemSelector), getClasses));
  cl.add(...getClasses(item));
  //cl.remove(...Array.from(container.querySelectorAll(itemSelector), getClass));
  //cl.add(getClass(li));
}

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

document.querySelectorAll(itemSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => updateClasses(e.currentTarget));

Или, можем применить делегирование:

document.addEventListener('click', e => {
  const item = e.target.closest(itemSelector);
  if (item) {
    updateClasses(item);
  }
});

Устанавливаете тип графика scatter, в настройках наборов данных указываете showLine: true. Например:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.3.0/chart.umd.js"></script>
<canvas id="chart"></canvas>

const createDataset = (color, label, baseY) => ({
  borderColor: color,
  label,
  showLine: true,
  data: Array.from({ length: 10 }, (_, i) => ({
    x: 10 * (i + (Math.random() - 0.5)) | 0,
    y: baseY + Math.random() * baseY | 0,
  })),
});

new Chart(document.querySelector('#chart'), {
  type: 'scatter',
  data: {
    datasets: [ 
      createDataset('red', 'hello, world!!', 50),
      createDataset('green', 'fuck the world', 100),
      createDataset('blue', 'fuck everything', 200),
    ],
  },
});

<template v-for="v, k in tableData">
  <tr>
    <td>{{ k }}</td>
  </tr>
  <tr v-for="n in v">
    <td>{{ n.name }}</td>
  </tr>
</template>

const languages = [
  { name:  'Ru', Component: AppRu  },
  { name: 'Eng', Component: AppEng },
  ...
];

const [ language, setLanguage ] = useState(0);
const { name, Component } = languages[language];
const onClick = () => setLanguage((language + 1) % languages.length);

<button onClick={onClick}>{name}</button>
<Component />

[^\/]+(?=\/?$)

.*(?=(?:\/[^\/]+){2}\/?$)

Главный косяк:

tableValues(element);

Как вы собираетесь перебирать элемент? Это абсурд. Должно быть element.children/element.childNodes.

Косяки помельче:

document.querySelector('form').childNodes

Поскольку вам нужны только input'ы и select'ы, то не надо перебирать заведомо лишнее - используйте children вместо childNodes. Ну и погуглите, в чём между ними разница.

if (element.nodeType == 1 && element.nodeName == 'INPUT' || element.nodeName == 'SELECT') {

Проверка значения nodeType лишняя. Кроме того, вам не помешает разобраться с приоритетом выполнения операторов - nodeType вы тут проверяете только для input'а.

let result = [];

Почему эта штука объявляется вне функции, а наполняется внутри? Что, перед каждым вызовом функции будете вручную обнулять результат? Надо создавать массив со значениями внутри функции, и возвращать его как результат её выполнения.

Ну и конечно всё это делается несколько короче:

const getValues = el =>
  el instanceof Element
    ? [ 'INPUT', 'SELECT' ].includes(el.tagName)
      ? [ el.value ]
      : [...el.children].flatMap(getValues)
    : [];

// или

const getValues = el =>
  [ 'INPUT', 'SELECT' ].includes(el?.tagName)
    ? [ el.value ]
    : [].flatMap.call(el.children ?? [], getValues);



const values = getValues(document.querySelector('form'));

Или ещё короче - если без рекурсии:

const values = Array.from(document.querySelector('form').elements, n => n.value);

А вообще, можно и в более общем виде задачу решить - если сделать проверку узла и получение данных из него параметрами функции:

const getFromDOMNodes = (node, test, getVal) =>
  node instanceof Node
    ? Array.prototype.reduce.call(
        node.childNodes,
        (acc, n) => (acc.push(...getFromDOMNodes(n, test, getVal)), acc),
        test(node) ? [ getVal(node) ] : []
      )
    : [];


const values = getFromDOMNodes(
  document.querySelector('form'),
  node => [ 'INPUT', 'SELECT' ].includes(node.nodeName),
  node => node.value
);

есть ли какие то сайты чтобы переписало с py на js ?

Есть.

Как может работать то, что вы не используете?

<div className={classes.bar1}></div>

Класс bar1 есть, это хорошо. А почему нет bar? Плохо.

UPD. Ну и в целом многословно как-то. Зачем копипастить по двенадцать раз одно и то же? В createUseStyles заменяем все barN на

...Object.fromEntries(Array.from({ length: 12 }, (_, i) => [
  `bar${i + 1}`,
  {
    transform: `rotate(${i * 30}deg) translate(0, -130%)`,
    animationDelay: `${i * 0.1 - 1.2}s`,
  },
])),

А в компоненте Loader пусть будет так:

<div className={`${classes.loader} js--loader`}>
  {Array.from(
    { length: 12 },
    (_, i) => <div className={`${classes.bar} ${classes[`bar${i + 1}`]}`}></div>
  )}
</div>

А что, сгруппировать массив data по значениям свойства type - нет, никак? А компонент аккордеона отдельный сделать - тоже никак? Предлагаю всё-таки подумать в эту сторону. Ну а пока - говнокод:

app.component:

opened = {}

get currentTabItems() {
  return this.data.filter(n => n.type === this.tabs[this.activeTab].toLowerCase());
}

<app-navbar [tabs]="tabs" [(activeTab)]="activeTab"></app-navbar>
<app-faq
  *ngFor="let item of currentTabItems;"
  [item]="item"
  [opened]="opened[item.type] === item"
  (toggle)="opened[item.type] = $event ? item : null"
></app-faq>

faq.component:

@Input() opened;
@Output() toggle = new EventEmitter();

<div class="faq__box" [class.isOpen]="opened" (click)="toggle.emit(!opened)">

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

Оба маркера уезжают. Из Петербурга под Вязьму. Или даже в Иран. Не пробовали масштаб уменьшать?

На самом деле никто никуда не уезжает, это иллюзия. Возникает из-за неправильного позиционирования картинки маркера относительно точки, к которой маркер привязан. Среди настроек маркера есть iconImageOffset - она поможет исправить ситуацию.

from collections import Counter

count = Counter(s)
sorted_count = sorted(count.items(), key=lambda n: n[1], reverse=True)

for n in sorted_count[:3]:
  print(f'"{n[0]}" - {n[1]}')

data: () => ({
  value: 1,
  step: 0.25,
}),
methods: {
  updateValue(up) {
    const { value, step } = this;
    const rounded = Math[up ? 'floor' : 'ceil'](value / step) * step;
    this.value = rounded + step * (up ? 1 : -1);
  },
},

<input v-model.number="value">
<button @click="updateValue(0)">-</button>
<button @click="updateValue(1)">+</button>

\d+(?=\D*$)

Возникает проблема, что нужно нажать 2 раза на подсказку, чтобы она исчезла.

Не она, а они. Выбираете подсказку - значение меняется. Поменялось значение - запускается эффект, в котором заново вычисляется массив подсказок, и они отображаются.

Может, вместо эффекта вам стоит вычислять массив подсказок в обработчике onChange:

const onChange = ({ target: { value } }) => {
  setVal(value);
  setPrintVariables(value.length > 1
    ? arrayVariables.filter(n => n.includes(value))
    : []
  );
};

<input value={val} onChange={onChange} />

??